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.

7 thoughts on “Angular 4 Development and Production Environments with Firebase”

  1. I am having this warning on my console:

    It looks like you're using the development build of the Firebase JS SDK.
    When deploying Firebase apps to production, it is advisable to only import
    the individual SDK components you intend to use.

    For the module builds, these are available in the following manner
    (replace <PACKAGE> with the name of a component – i.e. auth, database, etc):

    CommonJS Modules:
    const firebase = require('firebase/app');

    ES Modules:
    import firebase from 'firebase/app';
    import 'firebase/<PACKAGE>';

    import * as firebase from 'firebase/app';
    import 'firebase/<PACKAGE>';

    Anybody know how to get rid of this? 🙁

  2. what a firebase solution to htaccess user password? i see a few suggestions elsewhere, just wondering what your solutions is. thanks.


Leave a Comment