This tutorial covers:

  1. Setting up a Vue.js application on Firebase
  2. Using the Firebase CLI to deploy a Vue.js app
  3. Creating a continuous deployment pipeline

A quick search of the internet will reveal many services available for freely hosting single page applications or static sites. Firebase is one of these services. Firebase is a development platform developed by Google that provides file storage, hosting, database, authentication, and analytics. It is free, provides an SSL certificate by default, and offers impressive speed across multiple regions. I have chosen Firebase for hosting our demo application in this tutorial.

In this tutorial, I will guide you through using the Firebase CLI. You will use it to deploy an existing Vue.js application, available here on GitHub for free. Then we will go beyond manual deployment to set up a continuous deployment pipeline using CircleCI.

Prerequisites

Ensure that you have the following properly set up to follow along with this:

For this tutorial, you will need:

Our tutorials are platform-agnostic, but use CircleCI as an example. If you don’t have a CircleCI account, sign up for a free one here.

Setting up the demo project

Start by cloning the demo application into a vue-firebase folder on your computer. Enter this command:

git clone https://github.com/yemiwebby/vue-user-app.git vue-firebase

Change directory into the project. Install all its dependencies and serve the application using:

// change directory
cd vue-firebase
    
// install dependencies
npm install
    
// Run the application
npm run serve

Go to http://localhost:3000 to review the homepage on your local machine.

View homepage locally

Running the unit test locally

Now that the application runs as expected, you need to make sure that the unit test written for its components are passing. Open a new terminal. and enter this command:

npm run test:unit

Here is the expected output:

> vue-user-app@0.1.0 test:unit
> vue-cli-service test:unit
    
 PASS  tests/unit/user.spec.js
  User List component unit tests: 
    ✓ renders props when passed (13 ms)
    ✓ Renders the list (6 ms)
    ✓ creates a user (7 ms)
    
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.632 s
Ran all test suites.

That is it! Your application is properly set up locally. Your next step is to create a project for the app on Firebase. Later on in the tutorial you will deploy your application using CircleCI and Firebase CLI.

Creating a project on Firebase

If you already have a Firebase account, you can skip this step.

To create an account, go to the Firebase homepage, and click Get started. You will be redirected to a new page with instructions for adding a new project.

Create a Firebase project

Adding a project to Firebase

  1. Click the Add project button.
  2. Enter a name for your project. I have named mine vue-firebase.
  3. Click Continue.
  4. Disable Google Analytics; it is not required for this project.
  5. Click Continue again.

Firebase project created

You have now successfully created a project on Firebase. Next, you will associate your local project with the Firebase account.

Setting up Firebase hosting

To successfully host your application on Firebase, you need to install its tools and initialize it within your project.

Installing the Firebase CLI

Open a new terminal. To install Firebase tools globally, run this command:

npm install -g firebase-tools

You now have global access to the Firebase Command Line Interface tools. You can use them to deploy code and assets to your newly created Firebase project.

Connecting Vue to Firebase

From the terminal, sign in to your Firebase account:

firebase login

Log in using the CLI

Next, go to the root of the vue-firebase project. Initialize the project:

firebase init

Here is how to respond to the prompts:

  • Choose hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
  • Use an existing project: Select the Firebase project you created earlier; I named mine vue-firebase.
  • Enter dist as the public directory.
  • Configure as a single-page app: Yes.
  • Set up automatic builds and deploys with GitHub: No. For this tutorial we are using CircleCI to run tests and handle deployment.

Firebase initialized

Firebase successfully initialized

The project’s initialization process generates two unique files at the root of your project. These files are required for successful deployment and must be checked into source control:

  • firebase.json contains your project’s hosting configuration. Its content instructs the Firebase CLI about updating and deploying the files in your project directory.
  • .firebaserc specifies the project to connect to the uploaded code once you successfully deploy to Firebase.

Configuring CircleCI

Replace the content of .circleci/config.yml with this:

version: 2.1
jobs:
  build-and-test:
    working_directory: ~/project
    docker:
      - image: cimg/node:17.4.0
    steps:
      - checkout
      - run:
          name: Update NPM
          command: "sudo npm install -g npm"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: Install Dependencies
          command: npm install
      - run: npm install --save-dev firebase-tools    
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: Run test for the application
          command: npm run test:unit
      - run:
          name: Build application for production
          command: npm run build 
      - run:
          name: Deploy app to Firebase
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN                  
workflows:
  build-and-test:
    jobs:
      - build-and-test

This script:

  • Pulls in the CircleCI Docker image for Node.js.
  • Uses the image to install all required dependencies.
  • Runs the test for your application on CircleCI.
  • Installs the Firebase tool using npm install --save-dev firebase-tools.
  • Sets up a command to deploy your application to Firebase when tests are successful.

The deployment requires the FIREBASE_TOKEN. Because you are logged in from the terminal, you can easily create a token using the Firebase CLI. Enter this command:

firebase login:ci

Firebase Token

Copy this information and save it somewhere convenient. You will need it later on CircleCI.

The next step is to set up a repository on GitHub and link the project to CircleCI. Review Pushing a project to GitHub for instructions.

Log in to your CircleCI account. If you signed up with your GitHub account, all your repositories will be available on your project’s dashboard.

Next to your vue-firebase project, click Set Up Project.

Select project

You will be prompted to either write a new configuration file or use the existing one. Select the existing one and enter the name of the branch where your code is housed on GitHub. Click Set Up Project.

Your first workflow will start running. This build will fail because you have not yet created the FIREBASE_TOKEN environment variable.

Failed build

To fix this problem, you will need to add FIREBASE_TOKEN as an environment variable. Click Project Settings, then Environment Variables on the left sidebar. Create this variable:

  • FIREBASE_TOKEN is the value of the token you generated from the terminal earlier.

Environment variables

Go back to the dashboard. Click Rerun Workflow from Failed. This triggers the workflow, which should build successfully this time.

Go to the hosting URL shown in the last step. For me the URL is: https://vue-firebase-2c246.web.app.

Firebase app live

Conclusion

Whether you use Firebase or another hosting service, CircleCI helps you implement continuous integration and deployment for your Vue.js project. I hope that you found this helpful. The complete source code for this tutorial can be found here on GitHub.


Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. With a keen interest in solving day-to-day problems encountered by users, he ventured into programming and has since directed his problem solving skills at building software for both web and mobile. A full stack software engineer with a passion for sharing knowledge, Oluyemi has published a good number of technical articles and blog posts on several blogs around the world. Being tech savvy, his hobbies include trying out new programming languages and frameworks.

Read more posts by Olususi Oluyemi