"react-scripts: not found" on deployment to Azure Static Web Apps

Travis H 116 Reputation points
2021-02-13T20:34:57.73+00:00

I am attempting to use GitHub Actions with Azure Static Web Apps to deploy my site every time I execute 'git push.' The .yaml file was created automatically for me during the Azure Static Web Apps setup process.

However, I am not be able to deploy from GitHub to Azure Static Web Apps. I receive an error that says "react-scripts: not found".

===================================================

Running 'npm run build'...

projectx-p2@1.0.0 build /github/workspace
cd client && npm run build

client@0.1.0 build /github/workspace/client
react-scripts build

sh: 1: react-scripts: not found

===================================================

I used create-react-app for my client and express for my server. My folder structure on github looks like this:

Project/
|-- .github/workflows/
|
|-- client/
| |-- public/
| |-- src/
| |-- .eslintcache
| |-- .gitignore
| |-- README.md
| |-- package-lock.json
| |-- pacakge.json
|
|--node_modules/
|
|--server/
| |-- node_modules/
| |-- package-lock.json
| |-- package.json
| |-- server.js
|
|--.gitignore
|--package-lock.json
|--package.json

Thanks in advance for any pointers you might have,
Travis

Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
904 questions
0 comments No comments
{count} votes

Accepted answer
  1. Travis H 116 Reputation points
    2021-02-21T01:21:50.517+00:00

    Thank you, Vaibhav, for your response. You put me on the right path!

    When setting up the GitHub Action during the process of establishing an Azure Static Web App, you are asked for app, api, and output locations.

    As a test, I created a standard create-react-app app without the client/server folder structure of my current app. The GitHub Action was able to install, build, and deploy my Static Web App on Azure with no problems.

    I then went back to my current app and changed the three locations to be:
    app_location: "client" # App source code path
    api_location: "server" # Api source code path - optional
    output_location: "client/build" # Built app content directory - optional

    The deployment still failed. But it failed for a different reason than before. Progress!

    I then got this error: "The app build failed to produce artifact folder: 'client/build'. Please ensure this property is configured correctly in your workflow file."

    Following the advice of this Stackflow thread (https://stackoverflow.com/questions/64155765/react-js-deployment-with-github-actions-workflow-to-azure-web-app-build-folder-i), I changed the output location to just "build" but left the other two locations as they were.

    And now the GitHub Action successfully deploys to Azure Static Web Apps with with a client/server folder structure.

    Thank you again for your help,
    Travis


1 additional answer

Sort by: Most helpful
  1. VaibhavPandey 31 Reputation points
    2021-02-13T20:39:19.49+00:00

    Hi Travish,

    Have you copied your code for build to consume. Have'nt done GitHUb actions as of now but on Azure Devops pipelines you need to set a target to copy/download files from Git repos beforehand or check if you have copied code to wrong location.

    Thanks,
    Vaibhav

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.