CODEWITHSUNDEEP
firebasegithub-actionsfirebase-hosting
Afnan Shakeel
Afnan Shakeel

Reputation: 35

Github Actions issue for deploying vue3 firebase web app

I have a Vue 3 web app using Vite. I added Firebase for hosting my web app with GitHub action to deploy on push to main. The issue is with the deployment. It works fine when manually giving firebase deploy command. But on the GitHub action, it fails to deploy. Here is the hosting property of the firebase.json file.

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

This is the yaml workflow file for GitHub actions.

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ASXVEC }}'
          channelId: live
          projectId: asxvec

The error happens on the step - uses: FirebaseExtended/action-hosting-deploy@v0 the log from the actions is as:

  ***
    "status": "error",
    "error": "Directory 'dist' for Hosting does not exist."
  ***

  The process '/usr/local/bin/npx' failed with exit code 1
  Retrying deploy with the --debug flag for better error output

And then log continues and fail to below

  === Deploying to 'asxvec'...
  
  i  deploying hosting 
  [2023-09-12T06:44:17.269Z] >>> [apiv2][query] POST https://firebasehosting.googleapis.com/v1beta1/projects/-/sites/asxvec/versions [none]
  [2023-09-12T06:44:17.269Z] >>> [apiv2][body] POST https://firebasehosting.googleapis.com/v1beta1/projects/-/sites/asxvec/versions ***"status":"CREATED","labels":***"deployment-tool":"cli-firebase--action-hosting-deploy"***
  [2023-09-12T06:44:17.761Z] <<< [apiv2][status] POST https://firebasehosting.googleapis.com/v1beta1/projects/-/sites/asxvec/versions 200
  [2023-09-12T06:44:17.762Z] <<< [apiv2][body] POST https://firebasehosting.googleapis.com/v1beta1/projects/-/sites/asxvec/versions ***"name":"projects/236890820692/sites/asxvec/versions/ca662e0c4223cfac","status":"CREATED","config":***,"labels":***"deployment-tool":"cli-firebase--action-hosting-deploy"***
  i  hosting[asxvec]: beginning deploy... 
  
  Error: Directory 'dist' for Hosting does not exist.
  
  The process '/usr/local/bin/npx' failed with exit code 1
  Error: The process '/usr/local/bin/npx' failed with exit code 1
  ***
    conclusion: 'failure',
    output: ***
      title: 'Deploy preview failed',
      summary: "Error: The process '/usr/local/bin/npx' failed with exit code 1"
    ***
  **

There seems to be no other issue with building the code or manually deploying it to Firebase. This error exists purely on Github actions. I don't see many configurations used in the workflow yaml file either to try out to solve this issue.

Upvotes: 3

Views: 294

Answers (1)

Deekshith Xetty
Deekshith Xetty

Reputation: 337

The issue is that your actions script is trying to deploy the code without building it. Add the below line before deploying

- run: npm install && echo '-----Install Done 👌-----' && npm run build && echo '-----Build Done 👌-----'

Your full script for firebase.json should look something like this

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install && echo '-----Install Done 👌-----' && npm run build && echo '-----Build Done 👌-----'
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ASXVEC }}'
          channelId: live
          projectId: asxvec

Upvotes: 2

Related Questions