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