Deploy Vue SPA on firebase

Here I’ve put together the steps for deploying a SPA built with Vue.js to firebase hosting using the firebase cli.

1. Install the firebase cli

npm install -g firebase-tools

2. firebase login

firebase login

3. firebase init

# cd project-directory
firebase init

4. init setting

# Follow the firebase cli prompts

5. Configure firebase.json

The default value of firebase.hosting.public is public. Let’s change it to the dist folder where the output of npm run build is written.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "./dist", // change this part
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

6. npm run build

npm run build

7. firebase deploy

Now let’s upload the output of the dist folder to firebase hosting.

firebase deploy

8. Wrapping up

From now on, when deploying, you only need to do steps 6 and 7.

Etc.

If you want to deploy only the rules, you can do it as follows.

firebase deploy --only storage # deploy firebase storage rules
firebase deploy --only firestore # deploy firestore rules

The End