Setting up a Development Environment for Firebase

Since we will be integrating with Firebase for this application, there are a few more steps we need to complete in order to:

Set up local emulators so we don’t have to use real Firebase services during development
Install the firebase library
Install the rxfire library
Set up a Firebase project

We will be stepping through doing all of this in this lesson, and by the end of the lesson we will have a nice base to work from.

Install Firebase Tools

npm install -g firebase-tools

This will allow us to use the Firebase CLI to interact with various Firebase features. To begin, we are going to login with a Firebase account.

firebase login

After authenticating with your Firebase account you will be able to do things like create/select projects, which will be important for the next step.

Installing RxFire

As well as using the Firebase JavaScript SDK in our project, we are also going to install rxfire which exposes some of the Firebase functionality as observables. This is going to make things easier for our purposes.

It is worth noting that it is possible to convert just about anything you need into observables using RxJS operators like from and fromEvent, but it is much nicer if we don’t have to handle those things ourselves.

npm install firebase

npm install rxfire

    "moduleResolution": "node",

Configuration with the Firebase CLI

In order to generate a bunch of configuration we need for our project and also install the local emulators for Firebase services (like Authentication and Firestore databases) we are going to use the firebase init command.

firebase init

Firestore
Emulators

When prompted choose Create a new project and follow the prompts to create your project.

This is going to error complaining that you haven’t set up Firestore yet and it will give you a link to do that. Follow that link and select Create database. Follow the prompts and when asked choose to:

Start in test mode

We will configure our security rules properly later. Once the database has been created we can retry initialising our project.

firebase init

Firestore
Emulators

This time when prompted choose Use an existing project and select the one your just created.

Follow the prompts and accept the defaults for file names until you get to Emulators Setup.

When you get to the Emulators Setup stage make sure to choose:

Authentication Emulator
Firestore Emulator

Again, use the default values for the ports. When prompted, say yes to enabling the Emulator UI — this provides us with an interface similar to the Firebase console that we can access when running the emulators locally. Make sure you say yes to downloading the emulators.

At this point, you should have several new files added to your application:

.firebaserc
firebase.json
firestore.indexes.json
firestore.rules

Note that every time you update the security rules file, you will need to deploy it in order for those rules to go live. After making a change, you can either run:

firebase deploy

Which will deploy everything related to your Firebase project, or if you specifically want to deploy only the rules you can run:

EXTENDED EXTENDED

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).