Angular 4 Development and Production Environments with Firebase

Welcome to Angular Firebase. Today, I'm going to show you how to create separate backend environments for development and production with Angular 4. Maintaining separate environments allows you to build and test new features without screwing up data from your live production app.

Step 1 - Create two Firebase Projects

Before jumping into the code, you will need two separate Firebase projects one for development and one for production.

Step 2 Create the Environment Files

I just cloned the FireStarter App from github and the first step is to create the environment files. If you created a new app with the Angular CLI, these files will be here by default. Also, make sure to add these files to your gitignore as they will hold sensitive credentials for your app.

Step 3 paste in the firebase config using the unique API credentials from each of your projects.

Step 4 - Bootstrap the environment in the app module

Now we can import the environment anywhere in our app. In this case, we want to bootstrap firebase config in the app module. These are the necessary lines to wire up the environments with Firebase.

Step 5 - Serve or Build the App

With that done, its possible to serve our app locally using either environment. It will serve in development by default with

ng serve

or serve in product with the --prod flag

ng serve --prod

When deploying the app, make sure to always include the --prod flag.

ng build --prod

Thanks for watching. I'll see you on the other side. ... https://www.youtube.com/watch?v=iaXhn5Wuk2c