How to Deploy Vue.js Applications with Firebase Hosting

Photo by Chail

In this tutorial, I’m going to show how to deploy your Vue.js application using Firebase Hosting service in short and sweet manner.

Whether you’re deploying static sites, simple app landing page or a complex progressive web app (PWA), Firebase Hosting provides you with the tools, features and the infrastructure tailored to deploy and manage your websites and apps.

What we’ll cover in this quick tutorial?

· Setup the Firebase Hosting Project

· Configuring your Local Project

· Installing the Firebase CLI

· Deploy your application

Setup the Firebase Hosting Project

To set up a firebase hosting project, head over to their official site and click on “GO TO CONSOLE” link within the end of the main navigation menu.

Next, login with your google account or register for a new one if you don’t have it. Once the authentication process is completed, you’ll be redirected to the Firebase Console welcome page.

Now, add a new project by clicking on the “Add project” box as shown in the image below:

Add a Firebase Project

This post contains an affiliate link, meaning, at no additional cost to you, if you click through and make a purchase, I may receive a commission.

You can name your project whatever you want to. In my case I’m going to name it vue-news-app. Once you do that, hit the “Create project” button.

The whole point from this section is getting the “Project ID” and uses it in the configuration part.

Now, from the left side menu select Project Overview -> Project Settings to get the id of your project.

The Project ID

Just save your project id somewhere within a text file, and I will tell when to implement it in your local application.

Now we’re done we the Firebase console interface, the next step is configuring our vue.js application for the deployment process.

Installing the Firebase CLI

To install of the Firebase CLI (Command Line Interface) you should have Node.js and npm already installed on your machine.

Now, open you command prompt and install the Firebase CLI via npm:

npm install -g firebase-tools

This installs the firebase command globally, which we’ll make use of to deploy your Vue Application to Firebase Hosting.

Honey — 139,239 Chrome Store reviews 10,000,000 members and counting

Add to Chrome — Honey it’s a free chrome extension that finds you the Internet’s best discount codes.

Configuring your Vue Project

To configure your project you first need to build it for the production mode. To do that, within your project root folder run the following command:

npm run build

This will create a dist folder with everything you need to deploy.

Next, you’ll need to point Firebase to the dist folder. That’s why we’re going to need two configuration files to do just that.

In your code editor open your Vue project. And within the root folder create a new file called .firebaserc with the following content:

It’s the time to use your project id. Just replace the “your-firebase-project-id” with your project id value.

Again! From the root folder of your project, let’s create another configuration file called firebase.json, and then add the following content to it:

Great! Now that you’ve finished the configuration part, let’s take a quick look on the project structure to make sure everything is setup, before jumping to the section you’ve been waiting for, the deployment.

the project structure after the configuration

Deploying your Application

To deploy your application, you need first to connect your local machine to your Firebase account and obtain access to your Firebase projects. To do so, run:

firebase login

Once you successfully logged in, the following success message you’ll be displayed.

Now, from the root of your project directory, run the following command to deploy your application:

firebase deploy

This command deploys the dist folder content to your Firebase project that you’ve created earlier. Now if you visit https://your-firebase-project-id.firebaseapp.com, you should see the desired site live on a HTTPS server.

In my case, it’s going to be https://vue-news-app.firebaseapp.com.

Remember, if you’re looking to deploy your future builds, just run the following command:

npm run build && firebase deploy

And it’ll take care of both, building and deploying.

If you enjoyed this tutorial, please click the 👏 button and share to help others find it! And Feel free to leave a comment below.

All the best!