Unable to run from build folder

Question

I am unable to run my reactjs application on azure static web app from build folder. it is nightmare to fix it/understand how to config github action or staticwebapp.config.json or changes required to do so. locally the app runs from build folder using "serve -s build" but I don't know or how to make it happen, I am trying for many weeks now jsut fed up.

Answer 1

Hi @VIREN PATEL

If you are trying to deploy a pre-built React app to Azure Static Web Apps.

By running the command below, you can generate the build folder:

  npm run build

The build folder must be present in the GitHub repository. To ensure this, remove build from the .gitignore file.

In your workflow file, app_location: "build" and output_location: "" should be set like this.

Below is my complete Workflow file for reference:

name: Azure Static Web Apps CI/CD

on:

  push:

    branches:

      - main

  pull_request:

    types: [opened, synchronize, reopened, closed]

    branches:

      - main

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

    steps:

      - uses: actions/checkout@v3

      - name: Upload prebuilt build folder

        id: upload

        uses: Azure/static-web-apps-deploy@v1

        with:

          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ZEALOUS_WATER_0B405211E }}

          repo_token: ${{ secrets.GITHUB_TOKEN }}

          action: "upload"

          app_location: "build"           

          output_location: ""             

  close_pull_request_job:

    if: github.event_name == 'pull_request' && github.event.action == 'closed'

    runs-on: ubuntu-latest

    name: Close Pull Request

    steps:

      - name: Close PR Environment

        uses: Azure/static-web-apps-deploy@v1

        with:

          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ZEALOUS_WATER_0B405211E }}

          action: "close"       

If you're trying to deploy react app to azure without pre-built, in your workflow file app_location: "/" and output_location: "build" should be set like this.

Azure should build your app by running npm install && npm run build during deployment.

name: Azure Static Web Apps CI/CD

on:

  push:

    branches:

      - main

  pull_request:

    types: [opened, synchronize, reopened, closed]

    branches:

      - main

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@v3

        with:

          submodules: true

          lfs: false

      - 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_ZEALOUS_WATER_0B405211E }}

          repo_token: ${{ secrets.GITHUB_TOKEN }} 

          action: "upload"

          app_location: "/" 

          api_location: "" 

          output_location: "build" 

  close_pull_request_job:

    if: github.event_name == 'pull_request' && github.event.action == 'closed'

    runs-on: ubuntu-latest

    name: Close Pull Request Job

    steps:

      - name: Close Pull Request

        id: closepullrequest

        uses: Azure/static-web-apps-deploy@v1

        with:

          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ZEALOUS_WATER_0B405211E }}

          action: "close"

Output:

Hope this helps.

If the answer is helpful, please click Accept Answer and kindly upvote it. If you have any further questions about this answer, please click Comment.