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

Short Story

I am going to cover all steps of building an application from scratch:

1. We will generate a new app using angular-cli. (It is popular CLI tool for building Angular applications)
2. Next, we will setup Firebase for our new project to make possible API calls. (Firebase is very popular backend replacement which helps easily build application without effort on the infrastructure)
3. Also, we will use Firebase hosting to make our application live for both development and production environments.
4. After all, we will use GitLab CI to bring all parts together and automate Build, Testing, and Deploy phases!

You can check final repo here. But keep in mind that tutorial includes some information about a configuration of the GitLab repo itself.

#1 Generate Application

Firstly, we need to create an empty project in GitLab.

Make sure you have installed angular-cli to your computer. You can find instructions here.

Now, we are able to generate new project:

$ ng new ng-gitlab-firebase

$ cd ng-gitlab-firebase

Next, we are going to link a newly created local project with the remote GitLab project.

$ git init

$ git remote add origin https://gitlab.com/kobvel/ng-gitlab-firebase.git

#2 Firebase Setup

Let’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 (ng-firebase-dev).

ng-firebase-dev and ng-firebase new created projects in the Firebase console

Adding to our local project npm modules related to working with the Firebase.

$ npm install angularfire2 firebase --save

Next step is to initialize configure Angular application to work with Firebase. Opening src/app/app.module.ts …

src/app/app.module.ts

LOC 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 src/environments/environment.ts 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 Firebase

Let’s set up some basic API calls to show something on the screen

src/app/app.component.ts

src/app/app.component.html

The example above work only if you will turn off security rules for your real-time database. We will cover later how to deploy rules from local files. But to make sure your interaction with Firebase works fine just set write/read rules to true in the Firebases settings.

You can find mentioned configuration by going Database => Rules tab in the Firebase console.

Database/rules

#3 Firebase Hosting

Moving forward to make our application visible for the real world!

Installing firebase-tools, so our CI will be able to use firebase related commands.

$ npm install firebase-tools --save-dev

$ touch .firebaserc firebase.json

Above command will create 2 files which we will discuss in a second, each of them responsible for some part of the configuration of the Firebase Hosting.

firebase.json

firebase.json

Database: rules property is equivalent to Database/Rules configuration in the Firebase console. Basically, it is more convenient place to keep your database settings then just to change them in the Firebase console. They will be updated after deploy.

Normally you should never have .write: true for your projects! It isn’t secure! I’ve set them to true just for DEMO purpose as long as Authentication won’t be covered in this article.

Hosting: public property is saying what folder are we going to serve for hosting. As long as we are developing single page application we want our front-end to decide what to show to each route, so we are setting rewrites to redirect on any URL to index.html.

.firebaserc

.firebaserc is simply saying where to deploy code. develop is default one.

Make sure values are equal to the key names of the firebase project instances. Not to the name of the project. In my case production instance is equal to the ng-firebase-241bb, not just ng-firebase

#4 GitLab Ci configuration

To be able to deploy anything from GitLab CI we need to allow it to use our hosting. To do that we simply need to generate $FIREBASE_DEPLOY_KEY .

$ firebase login:ci

You will be redirected to a browser after this command. Pick your Firebase account and return to console. You should find something like:

Firebase generating of the deploy token

This long string under the “Success !” message is our new token. Open GitLab project configuration by clicking Settings/CI CD/Secret variables.

Adding FIREBASE_DEPLOY_KEY

Fill Key/Value inputs like shown above and click — Add new variable.

package.json

Now, we are ready to set up deploy process. We need to describe npm scripts in the package.json which will be used by our gitlab configuration.

scripts object in the package.json file

1. predeploy — saying to firebase which alias from predefined to use in the current deploy. We’ve defined them in the section #3 Firebase Hosting. Available are — default, develop, production. Through the $CI_ENVIRONMENT_SLUG we will get a corresponding value for an alias (production or develop), we will pass it later in the .gitlab-ci.yml file.
2. deploy — simply deploys our application with the deploy KEY which we’ve defined as the variable environment before.

.gitlab-ci.yml

Yaml files are pretty self-descriptive but let’s pay attention to few moments.

• Deploy develop/production happens only to the corresponding branches because of parameter only at the bottom of each stage.
• LOC 16,27: For develop/production deployments we are defining environment variables which will be used by npm run build. Under the hood will happen something like npm run build -e develop.
• Also in the package.json file we’ve used firebase use $CI_ENVIRONMENT_SLUG, so it will become firebase use develop. And Firebase will know which alias to use from .firebaserc for the current deploy.

Conclusion

GitLab has powerful built-in CI/CD which makes the full delivery cycle for your code easy to setup. Mixing it with the Firebase and Angular framework brings us to the new level of rapid web application development.

As the result of this tutorial, you will have auto-deploy of your application once there was a commit pushed to the master or develop branches. Which will be linked to the different database instances and hostings. Master branch is corresponding to the production environment and develop branch to the develop one.

Home task

There was described only one stage — deploy in the .gitlab-ci.yml file. Try to add new stage called — test to run tests before starting the deploying stage.