Search code examples
reactjsazure-web-app-service

Azure Windows React Deployment run into a error

I am trying to deploy my react app into a newly created Azure Service. I followed this guide but after I try to upload the build folder, I get this error message:

4:29:02 PM 1001GoldService: Deployment Failed. deployer = ms-azuretools-vscode deploymentPath = ZipDeploy. Extract zip. Remote build.
4:29:09 PM 1001GoldService: Deployment failed.

Since it's my first time using Azure, I find it a bit confusing specially when I try to search for a fix to that error. My guess would be that something with the package.json is not right, so here is the file:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.1",
    "react-scripts": "5.0.1",
    "sfcookies": "^1.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I am really hoping someone to point me at where the problem lies and help me deploy the react app.

Full output:

4:28:54 PM 1001GoldService: Starting deployment...
4:28:54 PM 1001GoldService: Creating zip package...
4:28:55 PM 1001GoldService: Zip package size: 2.2 MB
4:28:54 PM 1001GoldService: Fetching changes.
4:28:55 PM 1001GoldService: Cleaning up temp folders from previous zip deployments and extracting pushed zip file /tmp/zipdeploy/2834e240-ff72-469e-9de0-c8114be6ebc3.zip (2.10 MB) to /tmp/zipdeploy/extracted
4:28:57 PM 1001GoldService: Updating submodules.
4:28:58 PM 1001GoldService: Preparing deployment for commit id 'e8191abd-2'.
4:28:59 PM 1001GoldService: PreDeployment: context.CleanOutputPath False
4:28:59 PM 1001GoldService: PreDeployment: context.OutputPath /home/site/wwwroot
4:28:59 PM 1001GoldService: Repository path is /tmp/zipdeploy/extracted
4:28:59 PM 1001GoldService: Running oryx build...
4:28:59 PM 1001GoldService: Command: oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 18 -p virtualenv_name= --log-file /tmp/build-debug.log  -i /tmp/8dc37a8d19f24d9 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log
4:29:00 PM 1001GoldService: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
4:29:00 PM 1001GoldService: You can report issues at https://github.com/Microsoft/Oryx/issues
4:29:00 PM 1001GoldService: Oryx Version: 0.2.20230508.1, Commit: 7fe2bf39b357dd68572b438a85ca50b5ecfb4592, ReleaseTagName: 20230508.1
4:29:00 PM 1001GoldService: Build Operation ID: 01877ae608ca5bb9
4:29:00 PM 1001GoldService: Repository Commit : e8191abd-253a-4dd7-8bc3-cccc87557b95
4:29:00 PM 1001GoldService: OS Type           : bullseye
4:29:00 PM 1001GoldService: Image Type        : githubactions
4:29:00 PM 1001GoldService: Detecting platforms...
4:29:00 PM 1001GoldService: Could not detect any platform in the source directory.
4:29:00 PM 1001GoldService: Error: Couldn't detect a version for the platform 'nodejs' in the repo.
4:29:01 PM 1001GoldService: /bin/bash -c "oryx build /tmp/zipdeploy/extracted -o /home/site/wwwroot --platform nodejs --platform-version 18 -p virtualenv_name= --log-file /tmp/build-debug.log  -i /tmp/8dc37a8d19f24d9 -p compress_node_modules=tar-gz | tee /tmp/oryx-build.log ; exit $PIPESTATUS "
4:29:01 PM 1001GoldService: Generating summary of Oryx build
4:29:01 PM 1001GoldService: Parsing the build logs
4:29:01 PM 1001GoldService: Found 0 issue(s)
4:29:01 PM 1001GoldService: Build Summary :
4:29:01 PM 1001GoldService: ===============
4:29:02 PM 1001GoldService: Errors (0)
4:29:02 PM 1001GoldService: Warnings (0)
4:29:02 PM 1001GoldService: Deployment Failed. deployer = ms-azuretools-vscode deploymentPath = ZipDeploy. Extract zip. Remote build.
4:29:09 PM 1001GoldService: Deployment failed.
Solution

  • I tried by following the guide you mentioned. In your case, the error might be related to the Node.js version.

    Once, try updating your node version and then map it in the runtime stack of your Azure web app accordingly.

    Use the command below to update the node version:

    npm install -g node@latest

    I've used Node version 20.

    Create a React app: Step 1:

    npx create-react-app your-app-name

    Step 2:

    cd your-app-name

    Step 3:

    npm start

    Step 4: Once you are ready to deploy your web app to Azure, you need to build the app.

    npm run build

    In Visual Studio code, select the Azure logo in the taskbar to open the Azure window.

    Here are the steps:

    1. Select your Azure subscription.

    2. Then, select your created web app.

    3. Right-click on the web app; you can see the "Deploy to Web App" option.

    enter image description here

    1. Click on "Browse" instead of selecting the entire app, and then select the build folder to deploy.

    enter image description here

    enter image description here

    10:59:34 AM Sreactweb: Starting deployment...
10:59:34 AM Sreactweb: Creating zip package...
10:59:35 AM Sreactweb: Zip package size: 188 kB
10:59:33 AM Sreactweb: Updating submodules.
10:59:33 AM Sreactweb: Preparing deployment for commit id '4f37422d1f'.
10:59:33 AM Sreactweb: Generating deployment script.
10:59:33 AM Sreactweb: Using the following command to generate deployment script: 'azure site deploymentscript -y --no-dot-deployment -r "C:\local\Temp\zipdeploy\extracted" -o "C:\home\site\deployments\tools" --basic --sitePath "C:\local\Temp\zipdeploy\extracted"'.
10:59:35 AM Sreactweb: AppInsightsAgent: ETW could not be loaded
10:59:48 AM: Deployment to "Sreactweb" completed.

    To check the deployed files in azure

    1.Open you're Azure app service. 2. Search for Advanced Tools and click on it. 3. Afterward, click on Go.

    enter image description here

    1. Then you'll be redirected to a Kudu console.
    2. Click on Debug console and select CMD.

    enter image description here

    6.Open the "Site" folder.

    enter image description here

    7.Open the wwwroot folder.

    enter image description here

    8.Here, you can find your deployed files.

    enter image description here

    Here's the Output:

    enter image description here