Deploy a Vue.js App with Firebase Hosting

A short and sweet guide

Shayne O'Sullivan
May 5, 2017 · 1 min read

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 . Jacques Beets was kind enough to summarize a solution here: https://medium.com/@jacques.beets/hi-shayne-9a7bbca8d945

Shayne O'Sullivan

Written by

Believer, husband, code noodler, occasional poem writer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade