Deploying Vue.js App To Firebase Hosting in a minute

Create a Vue Project

Go ahead and create a brand new vue project if you haven’t already done so. Once the project is created, the folder structure will look like this:

Build The App

Once you’re ready to deploy… the first step is to build the app.

To build it, CD to your project on the Terminal and run.

npm run build 

This will create a dist folder inside your project that has index.html and the static folder that may have css folder, js folder etc.

Initialize Firebase

Install Firebase CLI.

npm install -g firebase-tools

Then, run the login command.

firebase login 

Once you’re logged in to firebase with the URL that was provided on the Terminal, initialize Firebase.

firebase init

It will ask a series of questions:

• Which Firebase CLI features do you want to set up for this folder? → hosting: Configure and deploy Firebase Hosting sites

• Please select an option: Use an existing project (I would choose this option if I have a firebase project already created)

• Select a default Firebase project for this directory 😕 → dist

Firebase defaults the project directory to public but our project build is in the dist folder. So, change to dist folder instead of public.

• Configure as a single-page app (rewrite all urls to /index.html)? → Yes (as it’s a single page app however all of the routes would work as expected).

Recommended → How to create a route in vue.js

• File dist/index.html already exists. Overwrite? → No (so that Firebase does not overwrite with default index.html file).

Then, you will get the ✔ Firebase initialization complete! message.

Finally, run it.

firebase deploy

This will give a hosting URL where you can see the vue app live. 🙂