What build configuration for React on Azure Static Web Apps?

Question

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://docs.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! percentage-calculator@0.1.0 build: `react-scripts build`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the percentage-calculator@0.1.0 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.

user_18935775 · Answer

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: fsevents@2.3.2 (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.

What build configuration for React on Azure Static Web Apps?

1 Answers