Automate Vuejs app Deployment to Firebase using Gitlab

Continuous Deployment has always been an excellent way to accelerate the feedback loop to the customers. It always helps the team member to pressure off as there isn’t any release day anymore.

In this article, We are going to create an application name my-vueapp with the help of VueJs CLI. Vuejs CLI helps you to scaffold the application with zero configuration and can be used as a rapid prototyping.

It does have a rich collection of plugins best suited for the frontend ecosystem.

In order to create an application, we simply run the following command in our terminal.

Note: To run the vue command you need to install the vue cli globally. Read here.

It will ask you to pick an option for the preset. We are going to pick the default preset.

There are many articles about presets, babel and eslint. If you are looking for babel plugins and presets this one is the good one.
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/

Now it will pull all the dependency files needed for the application and your app is ready.

Go inside the project and serve the application.

If you look into http://localhost:8080/. You can see the app.

We are going to push our project to gitlab. Pushing our existing project to the repo is easy just following the setups and your project is there.

We are going to use the hosting facilities provided by firebase to host our application. With the features of secure connections, fast content delivery, one-click rollback, and rapid deployment give developer to focus on application.

In order to host our application, we need to create a project in Firebase Console. I’ve already created one in my firebase, if you haven’t created or you don’t know about firebase you can read this documentation on how to setup your project.

Make sure you have installed firebase-tools globally:

From the root of your project, initialize firebase using the command:

Firebase will ask some questions on how to setup your project.

  • Choose which Firebase CLI features you want to setup your project. Make sure to select hosting.
  • Select the default Firebase project for your project.
  • Set your public directory to dist (or where your build's output is) which will be uploaded to Firebase Hosting.
  • Select yes to configure your project as a single-page app. This will create an index.html and on your dist folder and configure your hosting information.

Run npm run build to build your project.

To deploy your project on Firebase Hosting, run the command:

If you want other Firebase CLI features you use on your project to be deployed, run firebase deploy without the --only option.

You can now access your project on https://<YOUR-PROJECT-ID>.firebaseapp.com. In my case, it is https://my-vueapp-23bee.firebaseapp.com/.

This is good but it would better if we automate our deployment process with continuous integration. There’s a great article describing continuous integration, continuous deployment and continuous delivery by Atlassian.

Let’s Automate !!

As described by GitLab Pages documentation, everything happens with a .gitlab-ci.yml file placed in the root of your repository. This working example will get you started:

Commit the .gitlab-ci.yml file before pushing to your repository. Let’s break down the code.

  • Our application requires Nodejs to build and deploy it to the server. So, we are taking an image of node.
    image: node:latest
  • The deploy_production section is where the magic happens. Here we are going to install all the dependency packages needs for the application and also define our logic.

We are using a unique common here which we haven’t discussed yet.
firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY

In order to use firebase deployment script in CI we need tokens. Which can be obtained by running firebase login:ci followed by allowing access to the Gmail.

Thus obtained token is stored as environment variables in our gitlab.To
Setup variables you can go to “Settings>>CI/CD”.

$CI_PIPELINE_ID, build $CI_BUILD_ID are the reserved keys. To know more about reserved variables read here.

Now let’s change the text and commit our changes. We can see our auto deployment is a success.

Now if we go to our hosting we can see the pipeline <id> and build <id>.

Let’s check our site.

voilà !

The changes that we made is now available.

Javascript & Open Source Enthusiast, Adventure Lover