MDB Angular Boilerplate installation guide

MDB Angular Boilerplate is an Angular CRUD application starter with NgRx state management and Firebase backend

Important information!

Before using our starter application, follow the steps below to create and configure a Firebase project.

1. Download application files

2. Create new firebase project

3. Create new database

4. Configure database access rules

5. Enable authentication methods

6. Get access to application admin panel

1. Download application files

Download or clone application files from our Github repository.

Open downloaded folder in your code editor and run npm install command to install all dependencies.

2. Create new Firebase project

In order to take advantage of the benefits provided by Firebase, you need to create new project.

To do this, open the following page in your browser: https://console.firebase.google.com/

To create new application, click the "Add project" button and fill in a short form in which you will choose the name of your project.

After creating new Firebase application, you need to add it's config to the Angular files. To do this, click "Add Firebase to your web application ( icon) and then copy the entire config object to clipboard.

Then open the environment.ts and environment-prod.ts files in your MDB Angular Boilerplate project and add Firebase config object from the previous step.

Your environment file shoud look like this

        export const environment = {
        production: true,
        firebase: {
        apiKey: 'your firebase api key',
        authDomain: 'xxxx-d58ec.firebaseapp.com',
        databaseURL: 'https://xxxx-d58ec.firebaseio.com',
        projectId: 'xxxx-d58ec',
        storageBucket: 'xxxx-d58ec.appspot.com',
        messagingSenderId: 'your messaging sender id'
        }
        };
      

4. Configure database access rules

You need to add access rules for your database, so that the users have access to their content

To do that, go to database section in your Firebase project and click on "Rules" tab at the top of the page

      
          {
            "rules": {
              ".read": false,
              ".write": false,

                "projects": {
                  "$project": {
                    ".write": "auth.uid == $project || root.child('admins').child(auth.uid).val() === true",
                    ".read": "auth.uid == $project || root.child('admins').child(auth.uid).val() === true"
                  }
                },

                "customers": {
                  "$customer": {
                    ".write": "auth.uid == $customer || root.child('admins').child(auth.uid).val() === true",
                    ".read": "auth.uid == $customer || root.child('admins').child(auth.uid).val() === true"
                  }
                },

                "users": {
                  ".read": "root.child('admins').child(auth.uid).val() === true",
                  "$user": {
                    ".write": "auth.uid == $user || root.child('admins').child(auth.uid).val() === true",
                    ".read": "auth.uid == $user || root.child('admins').child(auth.uid).val() === true",
                  }
                },

                "admins": {
                  "$admin": {
                    ".write": "root.child('admins').child(auth.uid).val() === true",
                    ".read": "auth.uid == $admin || root.child('admins').child(auth.uid).val() === true"
                  }
                }
            }
          }
      
    

5. Enable authentication methods

You need to enable authentication methods to allow users to create new accounts and log in into application.

To do that, open your Firebase project and in the sidenav on the left select Authentication.

Then at the top of the page select Sign-in method tab.

Use with MDB Angular Pro

By default, our template uses components available in the MDB Angular Free version (angular-bootstrap-md), but it is possible to change this configuration and install MDB Angular Pro (ng-uikit-pro-standard). In order to do that, follow these steps:

1. Remove angular-bootstrap-md dependency from package.json file.
2. Install MDB Angular Pro with following command (if you haven't created your own MDB gitlab token, you can learn how to do it in our quick start guide):
   npm install git+https://oauth2:YOUR_TOKEN@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git --save
3. Open the angular.json file and update the styles array:
   • angular.json:

   
   "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
   "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
   "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
   "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
   "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
   "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
   "src/styles.scss"
             

4. Update import paths of the MDB Angular modules. You can use your IDE/Code Editor to search for all occurencies of angular-bootstrap-md and replace it with ng-uikit-pro-standard