Cannot deploy my React app in Azure Static Web Apps. Github actions throws this logs:

Question

Everything is running ok until this happen:

npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1654 packages, and audited 1655 packages in 1m

Then, right at the end of the logs I got this from Oryx and my App doesn't get deployed.

---End of Oryx build logs---
Oryx has failed to build the solution.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

I dunno what would be the solution. Should I remove the dependencies warned from the package-lock.json? (that's where the warnings came from)

I'm expecting to deploy my app as usual

Here my workflow file:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - sandbox
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - sandbox

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 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_HAPPY_SEA_000C4D810 }}
          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: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  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_HAPPY_SEA_000C4D810 }}
          action: "close"

Answer 1

I have deployed the React App to Azure Static Web App without any issues. Check the below workaround.

Create a React App in Local.

npx create-react-app my-react-app

Navigate to the Application root directory.

cd my-react-app

npm start

• Create a new Repository in the GitHub and push the local code.
• You will find the command to push the local code to repository in the GitHub.

git init
git add README.md
git commit -m "Update Code"
git branch -M main
git remote add origin https://github.com/Organization/RepositoryName.git
git push -u origin main

• In Azure Portal Create a new Static Web App.
• Under Deployment details, select the GitHub Account.Provide the Organization, Repository and Branch details.

Under Build details provide as mentioned below.

Build Prests - React
App location - api
Output location - build

Click on Review + create.

• Initially when I run the Application, I got the content page.

• Navigate to the GitHub = > Actions , check if the Build and Deployment is Successful or not.
• Click on Re-run jobs .

Output:

Refer my GitHub Repository.