Things to Watch Out for When Hosting a Vue.js App on Firebase

When you host a web app built with Vue.js on Firebase, you can run into a baffling situation. You access the URL that Firebase clearly told you was your web app’s URL, but nothing shows up on the screen!

The causes are as follows.

1. You didn’t specify the hosting directory. Firebase’s default hosting directory is public. So when you access your web app’s URL, only the index.html in the public directory is served. And of course, that’s a blank screen.
2. You may not have run npm run build.

The solutions are as follows.

1. Specify the hosting directory: change the value of hosting.public in firebase.json to dist.
2. Run npm run build.
   • If you run firebase deploy directly from your local console, you just need to run npm run build locally.
   • If you use github action (it’s set up by default when you run firebase init; the GitHub Actions workflow is triggered when a push lands on the master branch of the origin repo or when a PR is made), modify the GitHub Actions config file (*.yml) in the .github/workflows directory as shown below.

# ...
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build # added build!
      - uses: FirebaseExtended/action-hosting-deploy@v0
# ...

As shown above, you just need to add - run: npm ci && npm run build!

Reference: https://github.com/FirebaseExtended/action-hosting-deploy