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.

Having Trouble?

Some folks have reported issues when running npm run build . was kind enough to summarize a solution here: https://medium.com/@jacques.beets/hi-shayne-9a7bbca8d945

Written by

Believer, husband, code noodler, occasional poem writer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store