Deploy a Vue.js App with Firebase Hosting

A short and sweet guide

Make sure to install firebase-tools npm install -g firebase-tools

cd into your vue project’s root directory

Run npm run build in your root directory so that Vue builds your project for production. This will create a dist folder with everything you need to deploy… we’ll point Firebase to the dist folder in a sec.

run firebase init command

Select your the hosting option, and select the appropriate firebase project. Once you do this a .firebaserc file will be added to your directory. This file should be good to go. Also, a firebase.json file will have been added.

Configure your firebase.json file to reference the dist folder. It should look something like this:

{
"hosting": {
"public": "./dist"
}
}

OR if you’re using HTML5 History Mode in Vue Router, configure your firsebase.json like this:

{
"hosting": {
"public": "./dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Run firebase deploy

Congrats, you did it!!! 🎉

To deploy future builds, just run:

npm run build to build your project, then firebase deploy to deploy it.