Configuring Firebase with Angular

We’ll need to integrate Firebase into our application. Luckily, Firebase is a popular solution among the Angular community. There’s an official library that’ll take care of the heavy lifting for us.

Running the installation script

In the command line, run the following command:

ng add @angular/fire

We’re introducing a new command called ng add. It’s similar to the npm install command, meaning it will install a package for you. It will run an installation script if one is available in the package.

Some packages help you integrate them into an Angular project. This includes things like updating your configuration, downloading additional dependencies, or scaffolding new files. This will make our lives easier because we won’t have to do much to add Firebase to our project. It’s recommended that we run this command instead of running the npm install command.

The CLI may ask you some questions. Feel free to answer them however you like. You may need to authorize Firebase with your account. An email will be sent to your Gmail account to allow authorization. Follow the instructions from the CLI to complete this step.

Two files will be generated in your project’s root directory: .firebaserc and firebase.json. They’re mainly used for Firebase’s hosting feature. We can safely ignore these files. We won’t be deploying our project to Firebase.

API keys

We’ll need to grab our API keys to be able to communicate with Firebase. We can retrieve the necessary keys by going to the Firebase console. On the home page, there’s a button to add Firebase to your app.