React JS Deployment with GitHub Actions Workflow to Azure Web App build folder issue

Question

I have a simple react app that I am trying to deploy to azure web app. Some key points.

• Web App is already configured in Azure.
• Publish Profile of the Web App is already included in the GitHub Repository

I am using the following GitHub workflow code.

on: push


env:
  AZURE_WEBAPP_NAME: ReactJSRecipeAppGitHubActionsOct12020    # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '10.x'                # set this to the node version to use

jobs:
  build-and-deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: npm install, build, and test
      run: |
        # Build and test the project, then
        # deploy to Azure Web App.
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: 'Deploy to Azure WebApp'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

The entire workflow runs without any problems. everything is green. Both the code and the deploy job is public. You can see the whole thing here - https://github.com/Jay-study-nildana/APIServerDotNetCoreGitActionsCICD

Unfortunately, this does not work, because, the 'build' folder, which contains the actual website to be served does not get deployed at the root of the website.

in the current state, the entire root of the repository, gets deployed to the target web app, including the build folder. If I open the KUDU console, I can see the build folder and all the contents of the site.

So, the issue is, how do I get the above workflow, to put the contents of the 'build' folder, and not the whole repo?

Also, please, note the following.

• I have tried the following different options for the AZURE_WEBAPP_PACKAGE_PATH variable, and none of them work.

• '/build'

• './build/.'

• /build'

• './build/'

Answer 1

You can achieve your requirement by using one of below formats:

• build
• ./build

The build folder will be generated at the root of working directory after npm run build run successfully. So you need specify build or ./build as AZURE_WEBAPP_PACKAGE_PATH value to retrieve the build folder contents.