Module 4: Firebase Setup

Goals

To set up Firebase for use with our Angular app. This is a setup-only module with no conceptual explanations.

Create new Firebase Project

Disclaimer: Unless you use Firebase and Angular for a living, it’s unlikely that you will remember these exact setup steps - that’s fine - we don’t want you focusing on the 1-time setup, instead you should be focused on the other modules in this project, like how to actually use this after setup.

1. Visit the Firebase home page here.

2. In the top right corner, sign in to Google, and then “Go To Console”.

3. Create a new project.

4. Enter a name for your project, and then click “Create Project”.

5. You will then be directed to a website looking something like:

   

6. Click on the “Add Firebase to your web app” to display your project details.

7. You should see a modal with some information. Keep this page up we'll use this shortly

Configure Angular Project

1. We’ll need two packages - one for Firebase (“firebase”), and another to make Firebase and Angular play well together (“angularfire2”). run npm install firebase@^4.13.1 angularfire2@5.0.0-rc.3 --save

   We have a few more packages we will need to make everything work together.

   run npm install webpack firebase-cli popper.js rxjs-compat --save

2. Again, the Angular “boss” file will need to be aware of these Firebase packages. Open app.module.ts and import these modules:

   import { AngularFireModule, FirebaseAppConfig } from 'angularfire2';
   import { AngularFireDatabaseModule } from 'angularfire2/database';
   import { AngularFireAuthModule } from 'angularfire2/auth';
   import { AngularFirestoreModule } from 'angularfire2/firestore';

3. We also have to include them in the “imports” section, so it should look like this:

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    FormsModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    AngularFirestoreModule
  ],

1. And now you see the red underline beneath “firebaseConfig”, the same way we saw a red underline beneath “routes” earlier, before we created the “routes” variable. Time to do the same thing for “firebaseConfig”. Open the Firebase website and copy the configuration settings.

   
2. Create a new const called firebaseConfig in your app.module.ts above @NgModule, with the above data. It should look something like this. Note that the typescript linter may yell at you to use single quotes.

const firebaseConfig = {
  apiKey: 'yourKeyHere',
  authDomain: 'your-app-here.firebaseapp.com',
  databaseURL: 'https://your-app-here.firebaseio.com',
  projectId: 'your-app-here',
  storageBucket: 'your-app-here.appspot.com',
  messagingSenderId: '1234567890'
};

1. Return to the Firebase console and close the configuration popup. Select the “Database” tab on the left side of the screen, and then “Get Started” under the Realtime Database.

   
2. Select Start in Locked Mode.

   
3. Switch to the “Rules” tab at the top

   
4. Adjust the “read” and “write” rules to always be true (everyone can read and write to our database). Make sure to “Publish” the changes. You will get a warning that “your security rules are defined as public, anyone can read or write to your database” - that’s fine for now.

   
5. Return to the "data" tab:

   
6. Return to your code, and run “ng serve” again. Open your website and check your console - you should have no errors.

Since we’re at the end of a module, let’s do a quick git commit!

Next, we'll learn about authentication.

Authentication