This tutorial covers:
- Setting up a Vue.js application on Firebase
- Using the Firebase CLI to deploy a Vue.js app
- 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:
- Node.js installed. Firebase CLI requires version
^14.18.0 >=16.4.0. - A CircleCI account.
- A GitHub account.
- Vue CLI installed. This tutorial uses Vue CLI 5.
- Familiarity with building apps with Vue.js.
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.
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.
Adding a project to Firebase
- Click the Add project button.
- Enter a name for your project. I have named mine
vue-firebase. - Click Continue.
- Disable Google Analytics; it is not required for this project.
- Click Continue again.
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
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
distas 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.
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.jsoncontains your project’s hosting configuration. Its content instructs the Firebase CLI about updating and deploying the files in your project directory..firebasercspecifies 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
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.
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.
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_TOKENis the value of the token you generated from the terminal earlier.
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.
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.
