Deploy a Vue.js App with Firebase Hosting

Question

What is the best Way to deploy a vue.js app initialy created with vue-cli to Firebase Hosting? I prepared the vue-app for deployment with

npm run build

This creates the folder "dist" with the bundled js-file and assets like pictures.

Then- after installing firebase tools globaly, I run

firebase init

This creates a folder "public" with a default index.html file inside.

First i set in firebase.json:

  "hosting": {
"public": "dist"

}

and copied the index.html (the vue index.hltm) from the root-folder to "dist" folder. Then i deployed with

firebase deploy

It runs, but the paths to the pictures seem to be broken . I set public folder to "public" in firebase.json

      "hosting": {
"public": "public"

}

an put vue index.html there, but then "dist" is not found. I moved the "dist"-folder inside the "public"folder, and finaly- App is online on firebase.

But now npm run dev is not working any more. Firebase cli seems to break vue-cli.

So how to get vue-cli and firebase-cli playing together?

Answer 1

When you run firebase init few questions will be asked, like which firebase feature you want to use and select your project... when cli asks for

? What do you want to use as your public directory?

Type dist your desired folder. Now the dist folder will be deployed.

Check this link, Hope this helps.

Answer 2

I think i figured it out. First, keep two separatet Projects, one for vue app and one for Firebase-Hosting. So the CLI's can work independently and nothing gets broken. Develop your vue.js App and prepare for deploy with npm run build. All you need afterwards is the index.html in vue-project root and the folder dist Create Firebase project with CLI executing firebase init in empty Folder. Here you can also maintain firebase functions if needed.

You define public directory during firebase init or afterwards editing entry in firebase.json

"hosting": { "public": "public"}

This will become the root-directory of your App. Vue.js expects to have index.html directly in the root-directory and a subfolder dist inside it. So defining dist as root-directory is not what you want. Related paths like those for pictures in vue-app get broken. Leave settings for public at default. Then copy index.html and dist-folder from vue-project inside public directory in Firebase-project. If you want, you can now test localy what will get deployed using firebase serve If everything fine, deploy using firebase deploy

Answer 3

dist should be your public folder. Here is the working configuration for VueJS with Firebase hosting:

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

I've also written a written an in-depth guide on auto-deploying VueJS apps to Firebase hosting