I am going to cover all steps of building an application from scratch:
- We will generate a new app using angular-cli. (It is popular CLI tool for building Angular applications)
- 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)
- Also, we will use Firebase hosting to make our application live for both development and production environments.
- 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
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).
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
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
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.
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.
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
The finishing touch is to change the
firebaseConfig 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
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.
#3 Firebase Hosting
Moving forward to make our application visible for the real world!
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.
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.
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
.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
#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 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:
This long string under the “Success !” message is our new token. Open GitLab project configuration by clicking Settings/CI CD/Secret variables.
Fill Key/Value inputs like shown above and click — Add new variable.
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.
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 —
production. Through the
$CI_ENVIRONMENT_SLUGwe will get a corresponding value for an alias (production or develop), we will pass it later in the .
deploy— simply deploys our application with the deploy KEY which we’ve defined as the variable environment before.
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
onlyat 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
.firebasercfor the current deploy.
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.
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.