Short Story 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 for our new project to make possible API calls. ( ) Firebase 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 , , and phases! Build Testing Deploy You can check . But keep in mind that tutorial includes some information about a configuration of the GitLab repo itself. final repo here #1 Generate Application Firstly, we need to in . create an empty project 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 . The first one will correspond to our default production environment ( Second is development environment which will be responsible for dev-cycle needs ( ). Firebase console ng-firebase). ng-firebase-dev and new created projects in the Firebase console ng-firebase-dev ng-firebase Adding to our local project npm modules related to working with the Firebase. $ npm install angularfire2 firebase --save Next step is to initialize configure application to work with Firebase. Opening … Angular 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 file. src/environments/environment.ts Let’s take firebase config from our project ( ), which we’ve created earlier in the Firebase console. You can get it by clicking on the “ ” from the home screen of your Firebase console. Develop ng-firebase-dev Add Firebase to your web app Overview Getting config from by clicking on the Firebase console “ Add Firebase to your web app ” Basically, from this code snippet, we just need to take object. Let’s copy it and paste to the environment object, so we can use it for Angular-Firebase configuration. config Now property matching configuration object from our dev project. firebaseConfig For the configuration, we need several files which will correspond to the different environments (develop/production). Duplicating original file and creating and . future environment environment.ts environment.develop.ts environment.production.ts The finishing touch is to change the object of the to the corresponding config from the production project of the which we’ve created before. Check example . firebaseConfig environment.production.ts Firebase 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 for your real-time database. We will cover later how to deploy rules from local files. But to make sure your interaction with works fine just set rules to true in the Firebases settings. turn off security rules Firebase write/read You can find mentioned configuration by going tab in the Firebase console. Database => Rules Database/rules #3 Firebase Hosting Moving forward to make our application visible for the real world! Installing , so our CI will be able to use firebase related commands. firebase-tools $ 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 : 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 after deploy. Database rules updated Normally you should never have for your projects! I’ve set them to true just for DEMO purpose as long as Authentication won’t be covered in this article. .write: true It isn’t secure! 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 to redirect on any URL to . Hosting: public rewrites index.html .firebaserc is simply saying where to deploy code. is default one. .firebaserc develop 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 , not just ng-firebase-241bb 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 which will be used by our gitlab configuration. package.json scripts object in the file package.json — saying to firebase which alias from predefined to use in the current deploy. We’ve defined them in the section . Available are — , , . Through the we will get a corresponding value for an alias (production or develop), we will pass it later in the . file. predeploy #3 Firebase Hosting default develop production $CI_ENVIRONMENT_SLUG gitlab-ci.yml — simply deploys our application with the deploy KEY which we’ve defined as the variable environment before. deploy .gitlab-ci.yml Yaml files are pretty self-descriptive but let’s pay attention to few moments. develop/production happens only to the corresponding branches because of parameter at the bottom of each stage. Deploy only : For deployments we are defining environment variables which will be used by . Under the hood will happen something like . LOC 16,27 develop/production npm run build npm run build -e develop Also in the file we’ve used , so it will become . And Firebase will know which alias to use from for the current deploy. package.json firebase use $CI_ENVIRONMENT_SLUG firebase use develop .firebaserc Conclusion GitLab has powerful built-in CI/CD which makes the full delivery cycle for your code easy to setup. Mixing it with the and framework brings us to the new level of rapid web application development. Firebase Angular As the result of this tutorial, you will have auto-deploy of your application once there was a commit pushed to the or branches. Which will be linked to the different database instances and hostings. Master branch is corresponding to the environment and branch to the one. master develop production develop develop Home task There was described only one stage — in the file. Try to add new stage called — to run tests before starting the deploying stage. deploy .gitlab-ci.yml test

Google

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Company Mentioned

Mykhailo Churilov (Mikki Kobvel)

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

Mykhailo Churilov (Mikki Kobvel)

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES