Setup | Samply Angular 17 Admin & Dashboard Template by Pichforest

Setup Samply Angular

Introduction

Samply is a fully featured premium admin dashboard template in Angular 17 with Firebase/fake-backend developer-friendly codes.

Note: You need to fill firebase credentials in src/environments/environment.ts and src/environments/environment.prod.ts file.
You have to create an authentication app from https://firebase.google.com

Firebase

Set defaultauth=firebase in the src/environments/environment.ts file.
Also fill all the firebase credentials in the src/environments/environment.ts file.

                                          		  
export const environment = {
    production: false,
    defaultauth: 'firebase',
    firebaseConfig: {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
        measurementId: ''
    }
};

Fake-Backend

Set defaultauth=fake-backend in the src/environments/environment.ts file.

export const environment = {
    production: false,
    defaultauth: 'fake-backend',
    firebaseConfig: {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
        measurementId: ''
    }
};

i18n Language translation settings

How to add new language? Let add French language in the existing language.

Create fr.json file with reference to default language file and add it to src/assets/i18n folder.

Go to language.service.ts file and add i18n language short form "fr" to languages array.

export class LanguageService {
    public languages: string[] = ['en', 'es', 'de', 'it', 'ru', "fr"];

    constructor() {
        translate.use(browserLang.match(/en|es|de|it|ru|fr/) ? browserLang : 'en');
    }
}

Now add the new option of French language in the src/app/layouts/topbar/topbar.component.ts file.
```
listLang = [
    { text: 'French', flag: 'assets/images/flags/french.jpg', lang: 'fr' },
];
```
You must have to write all text in language files to make it working with all languages. Also make sure to add new words in all other language files src/assets/i18n/{language}.json.
To change default language to french? update below code in the src/app/core/services/language.service.ts file
```
constructor(){
    translate.use(browserLang.match(/en|es|de|it|ru|fr/) ? browserLang : 'fr');
}
```

Prerequisites

Please follow below steps to install and setup all prerequisites:

Nodejs
Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.
Git
Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

Install Prerequisites
Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command	Description
`npm install`	This would install all the required dependencies in the `node_modules` folder.
`ng serve`	Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:4200.
`ng build`	Generates a `/dist` directory with all the production files.
`ng build --configuration production`	Generates a `/dist` directory with all the production files.

Tips

SCSS: We suggest you to do not change any scss files from the src/assets/scss/app.scss folders because to get new updates will might be break your SCSS changes if any you have made. We strongly suggest you to use src/assets/scss/custom.scss file and use that instead of overwrite any theme's custom scss files.