How do I fix a failed GitHub Actions deployment to my Azure Web App for a Node/React project?

Question

I’m trying to deploy my Node/React application from GitHub to an Azure Web App using GitHub Actions, but the deployment fails. Originally, I saw an error about a missing requirements.txt (which is for Python, not Node). I’ve since updated my Web App to use Node 20 and set a startup command of npm start. However, my deployment still fails or doesn’t show my site as expected.

Project & Environment Details

• Language/Framework: Node.js 20, React (using [Vite/Create React App], etc.)
• Azure Service: Azure Web App (Linux)
• Deployment Method: GitHub Actions (auto-generated or manually created workflow)
• Repository Structure:
  • package.json and package-lock.json in [root or subfolder]
    • src folder with React components
      • .github/workflows/build.yml for GitHub Actions

What I’ve Done So Far

1. Changed the Azure Web App Stack:
   • Set Stack to Node and Major version to Node 20 in the Azure Portal under Configuration → General settings.
     • Added npm start as the Startup Command.
     1. Updated the GitHub Actions Workflow:
        • Replaced any Python references with Node steps, for example:

                 - uses: actions/setup-node@v3
        

with: node-version: '20'

• name: Install dependencies run: npm install
• name: Build run: npm run build
• name: Deploy uses: azure/webapps-deploy@v2 with: app-name: <MyWebAppName> publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} package: build

    - Confirmed my `package.json` has a `"start"` script, for example: 
  
  
    ```json
    "scripts": {
  

    "start": "serve -s build",
    "build": "react-scripts build"
  

}

        ```

        
        1. **Checked the Azure Portal**: 

        
           - Under **Deployment Center**, it shows GitHub as the source with GitHub Actions as the build provider.

           
              - I’ve also looked at **Log Stream** but didn’t see any obvious errors beyond the initial missing `requirements.txt` message.
```**Current Behavior**

- The GitHub Actions workflow either fails at the build step or claims success but my site still shows the default Azure page (or an error page).

- If I check the workflow logs, it might reference the old Python pipeline or a Node step that fails with no clear error.

- My local development works fine when I run `npm install && npm run build && npm start` on my machine.

**Question**

1. How can I ensure Azure Web App fully recognizes my Node/React configuration instead of defaulting to Python or ignoring my new workflow?

1. Is there a specific file structure or setting I need in `.github/workflows` or my Azure Portal config to properly deploy a React app built with Node 20?

1. Are there best practices for serving a React/Vite build on Azure Web Apps without encountering the default Azure welcome page?

**Additional Details**

- [Include any relevant error logs or screenshots from GitHub Actions, the Azure Portal, or your local build output.]

- [Mention if your code is in a subfolder like `/openmanus` and how you adjusted the workflow paths.]

**Thank You**  
 Any guidance on debugging or reconfiguring my Node-based Azure deployment is appreciated! Let me know if you need more info about my logs or file structure.

---

Answer 1

Hello @Luay Sharqiya,

To resolve your GitHub Actions deployment issue for a Node.js/React app on Azure Web App, ensure that your Azure settings are correctly configured.

In the Azure Portal, navigate to your Web App’s Configuration settings and set the stack to Node 20.

Additionally, update the Start Command as follows:

• If using Create React App, set it to: npm start as npx serve -s build

Below is my sample deployment YAML file for a React app. Modify it accordingly:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy

# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - sampath345

on:

  push:

    branches:

      - main

  workflow_dispatch:

jobs:

  build:

    runs-on: ubuntu-latest

    permissions:

      contents: read # Required for actions/checkout

    steps:

      - uses: actions/checkout@v4

      - name: Set up Node.js version

        uses: actions/setup-node@v3

        with:

          node-version: '20.x'

      - name: Install dependencies, build, and test

        run: |

          npm install

          npm run build --if-present

          npm run test --if-present

      - name: Zip artifact for deployment

        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job

        uses: actions/upload-artifact@v4

        with:

          name: node-app

          path: release.zip

  deploy:

    runs-on: ubuntu-latest

    needs: build

    environment:

      name: 'Production'

      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    

    steps:

      - name: Download artifact from build job

        uses: actions/download-artifact@v4

        with:

          name: node-app

      - name: Unzip artifact for deployment

        run: unzip release.zip

      

      - name: Deploy to Azure Web App

        id: deploy-to-webapp

        uses: azure/webapps-deploy@v3

        with:

          app-name: 'sampath345'

          slot-name: 'Production'

          package: release.zip

          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_009C04A9BEB14A4DAA466C6AB81567A5 }}

Ensure your GitHub Actions workflow correctly installs dependencies, builds your React app, and deploys it to Azure.

In General Settings, set the Startup Command to:

pm2 serve /home/site/wwwroot/build --no-daemon

This is required when "start": "serve -s build" is set in your package.json file to properly run the app.

I hope this helps!

If you found this answer helpful, please click Accept Answer and consider upvoting it by clicking Yes.

If you have any further questions, feel free to click Comment.