`npx: not found` when building Blazor WASM on GitHub Actions

Before filing this issue, please ensure you’re using the latest CLI by running swa --version and comparing to the latest version on npm.

ℹ️ NOTE: Make sure to enable debug logs when running any swa commands using --verbose=silly

Describe the bug When building my Blazor WASM application using the default GitHub Action template, I get the following error:

App Directory Location: 'Blazor' was found.
No Api directory specified. Azure Functions will not be created.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues
Oryx Version: 0.2.20220401.1, Commit: afed4f696a08bfd4c8e4109704a082bf9fb20515, ReleaseTagName: 20220401.1
Build Operation ID: |xrf2qm5foks=.203f2b07_
Repository Commit : f1f53864c65e57818ae78323cb3974f119d04073
Detecting platforms...
Detected following platforms:
  dotnet: 6.0.6
Version '6.0.6' of platform 'dotnet' is not installed. Generating script to install it...
Detected the following frameworks: blazor
Source directory     : /github/workspace/Blazor
Destination directory: /bin/staticsites/ss-oryx/app
Downloading and extracting 'dotnet' version '6.0.301' to '/opt/dotnet/6.0.301'...
Downloaded in 3 sec(s).
Verifying checksum...
Extracting contents...
performing sha5[12](https://github.com/tdashworth/name-badge-automater/runs/7405789091?check_suite_focus=true#step:6:13) checksum for: dotnet...
Done in 8 sec(s).
image detector file exists, platform is dotnet..
Using .NET Core SDK Version: 6.0.301
Running 'dotnet workload install wasm-tools'...
Welcome to .NET 6.0!
---------------------
SDK Version: 6.0.301
Telemetry
---------
The .NET tools collect usage data in order to help us improve your experience. It is collected by Microsoft and shared with the community. You can opt-out of telemetry by setting the DOTNET_CLI_TELEMETRY_OPTOUT environment variable to '1' or 'true' using your favorite shell.
Read more about .NET CLI Tools telemetry: https://aka.ms/dotnet-cli-telemetry
----------------
Installed an ASP.NET Core HTTPS development certificate.
To trust the certificate run 'dotnet dev-certs https --trust' (Windows and macOS only).
Learn about HTTPS: https://aka.ms/dotnet-https
----------------
Write your first app: https://aka.ms/dotnet-hello-world
Find out what's new: https://aka.ms/dotnet-whats-new
Explore documentation: https://aka.ms/dotnet-docs
Report issues and find source on GitHub: https://github.com/dotnet/core
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli
--------------------------------------------------------------------------------------
Skipping NuGet package signature verification.
Skipping NuGet package signature verification.
Skipping NuGet package signature verification.
Installing workload manifest microsoft.net.sdk.maui version 6.0.408…
Installing workload manifest microsoft.net.sdk.maccatalyst version [15](https://github.com/tdashworth/name-badge-automater/runs/7405789091?check_suite_focus=true#step:6:16).4.315…
Installing workload manifest microsoft.net.sdk.macos version 12.3.315…
Installing workload manifest microsoft.net.workload.mono.toolchain version 6.0.7…
Installing workload manifest microsoft.net.sdk.ios version 15.4.315…
Installing workload manifest microsoft.net.sdk.android version 32.0.424…
Installing workload manifest microsoft.net.sdk.tvos version 15.4.315…
Installing pack Microsoft.NET.Runtime.WebAssembly.Sdk version 6.0.7...
Writing workload pack installation record for Microsoft.NET.Runtime.WebAssembly.Sdk version 6.0.7...
Installing pack Microsoft.NETCore.App.Runtime.Mono.browser-wasm version 6.0.7...
Writing workload pack installation record for Microsoft.NETCore.App.Runtime.Mono.browser-wasm version 6.0.7...
Installing pack Microsoft.NETCore.App.Runtime.AOT.Cross.browser-wasm version 6.0.7...
Writing workload pack installation record for Microsoft.NETCore.App.Runtime.AOT.Cross.browser-wasm version 6.0.7...
Installing pack Microsoft.NET.Runtime.MonoAOTCompiler.Task version 6.0.7...
Writing workload pack installation record for Microsoft.NET.Runtime.MonoAOTCompiler.Task version 6.0.7...
Installing pack Microsoft.NET.Runtime.MonoTargets.Sdk version 6.0.7...
Writing workload pack installation record for Microsoft.NET.Runtime.MonoTargets.Sdk version 6.0.7...
Installing pack Microsoft.NET.Runtime.Emscripten.Node version 6.0.4...
Writing workload pack installation record for Microsoft.NET.Runtime.Emscripten.Node version 6.0.4...
Installing pack Microsoft.NET.Runtime.Emscripten.Sdk version 6.0.4...
Writing workload pack installation record for Microsoft.NET.Runtime.Emscripten.Sdk version 6.0.4...
Garbage collecting for SDK feature band(s) 6.0.300...
Successfully installed workload(s) wasm-tools.
  Determining projects to restore...
  Restored /github/workspace/Blazor/NameBadgeAutomater.csproj (in 1.71 sec).
Publishing to directory /bin/staticsites/ss-oryx/app...
Microsoft (R) Build Engine version 17.2.0+41abc5629 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.
  Determining projects to restore...
  All projects are up-to-date for restore.
  NameBadgeAutomater -> /github/workspace/Blazor/bin/Release/net6.0/NameBadgeAutomater.dll
  NameBadgeAutomater (Blazor output) -> /github/workspace/Blazor/bin/Release/net6.0/wwwroot
  /bin/sh: 2: /tmp/tmpbc22db7e754d4225b00c2f15c09d7f80.exec.cmd: npx: not found
/github/workspace/Blazor/NameBadgeAutomater.csproj([16](https://github.com/tdashworth/name-badge-automater/runs/7405789091?check_suite_focus=true#step:6:17),5): error MSB3073: The command "npx tailwindcss -i ./Styles/app.css -o ./wwwroot/css/app.css" exited with code 1[27](https://github.com/tdashworth/name-badge-automater/runs/7405789091?check_suite_focus=true#step:6:28).

I also tried adding node setup and install steps beforehand but no luck.

      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Setup Node JS
        uses: actions/setup-node@v1
      - name: Install Tailwind CLI
        run: npm install -g tailwindcss
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_SAND_091221803 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "Blazor" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "wwwroot" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

To Reproduce Steps to reproduce the behavior:

1. Create a Blazor WASM app
2. Follow these steps to setup tailwindcss https://chrissainty.com/adding-tailwind-css-v3-to-a-blazor-app/#integrating-using-the-tailwind-cli-via-npm
3. Try to build via swa cli on GitHub actions

Expected behavior Build to success, npx to be available.

Additional context I realise this might not be a swa problem but looking for guidance as to the next steps, please.

[sgollapudi77]

Thanks for the solution @meziantou. @tdashworth, we’re closing this issue, please feel free to raise concerns or re-open this if you’re facing any technical difficulties.

[Petri-Leinonen]

A workaround is to manually build the app first (before the SWA step) using dotnet publish. Then, you can use the generated artifacts in the SWA step (don’t forget skip_app_build: true). This way you can skip the SWA’s magic build.

The yml should look like the following:

jobs:
  build_website:
    runs-on: ubuntu-20.04
    steps:
    - uses: actions/checkout@v3
    - name: Setup .NET Core
      uses: actions/setup-dotnet@v2

    - name: Build Site
      run: dotnet publish --output output

    - name: Deploy
      uses: Azure/static-web-apps-deploy@v1
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: "upload"
        app_location: "output"
        output_location: ''
        skip_app_build: true

I need to run a custom build script, that copies files to build-folder. So I made a simple bat-file that does it. Then I made the following changed to my build config, according to your post. But I’m getting a error code 127 when the Github action starts running. Any idea what could be wrong? If I understood correctly, the custom build script shouldn’t even run in the Github action? It should only be executed locally before the code gets to Github.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true

      - name: Build Site
        run: npm run build                  <---- My custom build script - this copies the files from src to build folder locally just fine.

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_MUD_0F3415D03 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_build_command: ""
          app_location: "build" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          skip_app_build: true
          skip_api_build: true  
          ###### End of Repository/Build Configurations ######