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
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.