Search code examples
angularfirebasegithub-actions

Firebase Deploy doesn't works in GItHub Actions workflow?


I have an issue when i try to use GitHub Actions in my Angular project i'd setup my project following these steps on the Firebase Site and the console shows this error

Error: Directory 'dist\arkdia-app' 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"



Anyone knows why isn't work for me?

This is my Firebase-hosting-merge.yml file

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - Production
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - name: Install Dependencies
        run: |
          npm install
          npm install -g @angular/cli
          npm install -g firebase-tools
      - name: Build Production
        run: ng build --configuration=production
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: ${{ secrets.FIREBASE_PROJECT_ID}}

This is my project.json

{
  "$schema": "node_modules/nx/schemas/project-schema.json",
  "name": "arkdia-app",
  "projectType": "application",
  "generators": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "sourceRoot": "src",
  "prefix": "app",
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/arkdia-app",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/@popperjs/core/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "2mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production",
      "outputs": [
        "{options.outputPath}"
      ]
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "arkdia-app:build:production"
        },
        "development": {
          "browserTarget": "arkdia-app:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "arkdia-app:build"
      }
    },
    "test": {
      "executor": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.spec.json",
        "karmaConfig": "karma.conf.js",
        "inlineStyleLanguage": "scss",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
          "src/styles.scss"
        ],
        "scripts": []
      }
    },
    "deploy": {
      "executor": "@angular/fire:deploy",
      "options": {
        "prerender": false,
        "ssr": false,
        "browserTarget": "arkdia-app:build:production",
        "firebaseProject": "firebase-my-project-id",
        "firebaseHostingSite": "firebase-my-project-id"
      }
    }
  }
}

This is my firebase.json

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

I tryed to run GitHub Actions Workflow using for Firebase deploy process when i push or merge changes in Production Branch

Hope someone can help me.

P.S: Sorry for my writting. If you need ore information please let me know

Kind regards


Solution

  • Could you try changing the below field, we can use a normal / instead of escaping the slash.

    "public": "dist/arkdia-app",
    

    Sample Firebase.json:

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