Question 105738 in Azure Question posted in
The official documentation to get you started can be found here.

What build configuration for React on Azure Static Web Apps?

I have seemingly tried everything and see conflicting instructions on deploying a React app (without API) to Azure Static Web Apps even from Microsoft. Has anyone done this successfully?

The latest doc I’ve used is:
https://learn.microsoft.com/en-gb/azure/static-web-apps/get-started-portal?tabs=react&pivots=github

which is for creating the SWA in the portal though I’ve used others as well with problems.

I’ve now arrived at this error:


    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build: `react-scripts build`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /github/home/.npm/_logs/2022-07-12T19_38_33_349Z-debug.log
    ---End of Oryx build logs---

    Oryx has failed to build the solution.

Here is my file structure if that matters:

react-app ->src ->components ->index.js,App.js etc..
          ->public ->index.html etc..
          ->build (build is gitignored)
          ->node_modules etc..

My azurestaticwebapps… yml file contains:

app_location: "/"
api_location: ""
output_location: "build"

https://github.com/markhardy/percentage-calculator/runs/7308960687?check_suite_focus=true

Can someone explain what I’m doing wrong? I’m at a loss at this point especially with conflicting instructions from Microsoft.

Tags:

2

Answers


  1. 0

    Has anyone done this successfully?

    • We have followed the same document which you have provided and able to build and deploy React static web App from portal without any issues.

    Build and Deploy Job:
    enter image description here

    package.json file:

    {  
"name": "hello",  
"version": "0.1.0",  
"private": true,  
"dependencies": {  
"@testing-library/jest-dom": "^4.2.4",  
"@testing-library/react": "^9.3.2",  
"@testing-library/user-event": "^7.1.2",  
"react": "^16.12.0",  
"react-dom": "^16.12.0",  
"react-scripts": "3.4.0"  
},  
"scripts": {  
"start": "react-scripts start",  
"build": "react-scripts build",  
"test": "react-scripts test",  
"playwright_test": "playwright test",  
"eject": "react-scripts eject"  
},  
"eslintConfig": {  
"extends": "react-app"  
},  
"browserslist": {  
"production": [  
">0.2%",  
"not dead",  
"not op_mini all"  
],  
"development": [  
"last 1 chrome version",  
"last 1 firefox version",  
"last 1 safari version"  
]  
},  
"devDependencies": {  
"@playwright/test": "^1.22.2"  
}  
}
    • Try to add devDependencies in your package.json file and check once.

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):

    • As per this Document, we can add optionalDependencies in your package.json file or can run npm install -f.

    Please refer Troubleshooting deployment and runtime errors for Static Web Apps for more information.

    Login or Signup to reply.
  2. 0

    Seems you have warnings in your code, so the compiler doesn’t like it.
    Simply change the yml file as below:

    under build_and_deploy_job, add:
    env:
    CI: false

    This will stop treating warnings as errors.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search