CODEWITHSUNDEEP
vue.jsnuxt.jsgithub-actionsfirebase-hostingnuxt3.js
mikudrip
mikudrip

Reputation: 21

Nuxt3 : CSS/JS files 404 Errors when deploying to test channel of Firebase Hosting

I've been trying to deploy a Nuxt3 project (I've recently joined) from Github Actions to Firebase Hosting (deploying to the live channel when merging the master branch & to a testing temp channel when merging the dev branch). The workflow script runs fine and the app builds like normal but when accessing the testing channel URL a bunch of CSS and JS files are reported missing, the reason being that they are built with a particular hash in their filenames which are different from the hashes the page is trying to reach (example : the app built entry.7c2ea9b2.js and the page is trying to load entry.37b79eda.js, this is the case for a few files and as a result the page looks really off). I noticed the same problem occurs when I pulled the project on my machine and deployed to Firebase from the CLI. My teammate however, who have always been using the same machine to deploy, manages to deploy the project without this issue, so I'm guessing this has to do with something related to cache. Though I'm not sure if it concerns Firebase or the Nuxt project files. This doesn't happen if I run the nuxt generate command but this only works for the static pages, dynamic routes and some other pages get the same kind of 404 errors. I've tried deleting the .output and .nuxt folders, the hosting.cache file in /.firebase as well but no change.

The commands we use to build & deploy are npx cross-env NITRO_PRESET=firebase npm run build and then npx firebase deploy (or hosting:channel:deploy testing for the test channel).

Below is the workflow script :

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main
      - dev

jobs:
  dev:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/dev'
    steps:
      - uses: actions/checkout@v2
      - run: npm install && npx cross-env NITRO_PRESET=firebase npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_DESK_APP }}'
          channelId: testing
          projectId: desk-app
          target: desk-app

Framework versions: Nuxt 3.1.1 Nitro 2.1.1 vite v4.0.4

Thanks in advance for your help.

Expected behavior: On deployment, Firebase is updating its cache and the testing page should point to the public files with their correct hashes, as they were built in the process before deployment.

Upvotes: 2

Views: 421

Answers (1)

George
George

Reputation: 365

I had similar issues when trying to deploy my Nuxt 3 app to a firebase testing channel: only my prerendered pages were showing.

Instead I tried deploying normally (using "firebase deploy" command), and it worked perfectly.

Nuxt/nitro (not really sure which one) needs to create and deploy a firebase cloud function to serve your dynamic content, but I think (please correct me if I am wrong) it only does this when one uses "firebase deploy" and not "hosting:channel:deploy". I suspect this because during "firebase deploy" the logs showed that it was creating such a cloud function, which it didn't during "hosting:channel:deploy".

Not sure if this will help in your case, but it might be useful for anyone who has similar issues.

Upvotes: 1

Related Questions