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.