Gitlab is slowly becoming a popular SVN and CI deployment tool thanks to the Gitlab community release In addition, the advent of Firebase makes it easier than ever to deploy environments for testing or even production. So in this article, I will guide you through the basic configuration of CI/CD angular (can be applied well to reactjs or vuejs) application using a combination of gitlab and firebase (In fact, it may take some config is more complex for testing or building staging or production).
First, you need to install firebase-cli with the command:
npm i -g firebase-tools
or
yarn global add firebase-tools
After installing the firebase cli, we need to login to firebase to be able to configure it via the command line:
firebase login
There will be a question if you want to send firebase usage data for statistics, then choose “no”. You can choose yes, but I limit the ones that run in the background that consume resources =)). Right after that, a browser popup opens, enter your account and password to login.
Next, go to the root folder of the project and run the command:
firebase init
It asks if you are ready, Of course. Next will bring up the menu of features, then select “Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys” as below (Use SPACEBAR to select):
Then enter to continue, in the next step choose “Create new project” or “Use existing project” if you already have a project created on firebase console. If you choose “Create new project” like me, you need to enter your project id for example: firebase-hosting-deploy-test
Enter 2 plays (it asks if your project wants to name it, then choose the same as the id). Next it will ask you what folder/path you want it to use in the project to deploy, here is the Angular app, so I will enter it as “dist/<App name>”. If using reactjs or any other technology, edit the same directory.
It appears as above that I have configured deploying the app to firebase ok. To try and see if it’s ok, I will build angular app with the command:
yarn build
After the build is complete, the folder “dist/firebase-hosting-deploy-test” is ready to deploy to firebase hosting.
dist firebase-hosting-deploy-test
Run command:
firebase deploy
Wait for the firebase cli to deploy the app to the hosting. The result is as below:
firebase deploy
Immediately go to the path returned by firebase: https://fir-hosting-deploy-test.web.app and ….
Through this article, we know how to deploy singlepage web application to firebase hosting. The next section will guide everyone to automate all operations and integrate with Gitlab CI to automatically build and deploy our app every time a new commit is merged.