Menu

From Zero to Production with Angular, Firebase, and GitLab CI

November 3rd, 2017

From Zero to Production with Angular, Firebase, and GitLab CI

  • #2 Firebase SetupLet’s create two projects in the Firebase console.
  • Second is development environment which will be responsible for dev-cycle needs and ng-firebase new created projects in the Firebase consoleAdding to our local project npm modules related to working with the Firebase.
  • Opening 4–6: Imports of Angular-Firebase corresponding libraries.LOC 17: Initializing Firebase module with the unknown config, which we are about to add to our file.Let’s take firebase config from our Develop project (ng-firebase-dev), which we’ve created earlier in the Firebase console.
  • You can get it by clicking on the “Add Firebase to your web app” from the home Overview screen of your Firebase console.Getting config from Firebase console by clicking on the “Add Firebase to your web app”Basically, from this code snippet, we just need to take config object.
  • The finishing touch is to change thefirebaseConfig object of the environment.production.ts to the corresponding config from the production project of the Firebase which we’ve created before.

You can check final repo here. But keep in mind that tutorial includes some information about a configuration of the GitLab repo itself. Let’s create two projects in the Firebase console. The first…

#2 Firebase SetupLet’s create two projects in the Firebase console. The first one will correspond to our default production environment (ng-firebase). Second is development environment which will be responsible for dev-cycle needs and ng-firebase new created projects in the Firebase consoleAdding to our local project npm modules related to working with the Firebase.$ npm install angularfire2 firebase –saveNext step is to initialize configure Angular application to work with Firebase. Opening 4–6: Imports of Angular-Firebase corresponding libraries.LOC 17: Initializing Firebase module with the unknown config, which we are about to add to our file.Let’s take firebase config from our Develop project (ng-firebase-dev), which we’ve created earlier in the Firebase console. You can get it by clicking on the “Add Firebase to your web app” from the home Overview screen of your Firebase console.Getting config from Firebase console by clicking on the “Add Firebase to your web app”Basically, from this code snippet, we just need to take config object. Let’s copy it and paste to the environment object, so we can use it for Angular-Firebase configuration.Now firebaseConfig property matching configuration object from our dev project.For the future configuration, we need several environment files which will correspond to the different environments (develop/production). Duplicating original environment.ts file and creating environment.develop.ts and environment.production.ts .The finishing touch is to change thefirebaseConfig object of the environment.production.ts to the corresponding config from the production project of the Firebase which we’ve created before. Check example here.After step #2 we have everything ready to work with FirebaseLet’s set up some basic API calls to show…

From Zero to Production with Angular, Firebase, and GitLab CI