Getting 404 error in static web app while deploying react.js application using local deployment.

Question

I am getting 404 error in Static Web App while deploying react.js application using Local deployment under Default/preview Environment. After Deployment when I try to open the Preview URL, it throws a 404 error, screenshot attached.

When I do the same deployment by putting the environment as Production, it works fine.

Note: My preview URL was working fine last week, it started throwing 404 error since Friday whenever I redeploy the application.

404Error.png

Answer 1

Hi @patrick francis ,
welcome to the Microsoft Q&A Platform!
Since your preview URL was working fine last week and began showing a 404 error after redeployment, it suggests that something changed in either the deployment configuration or your code. Here's a more targeted approach:
Check Build Output Folder:

{
  "appLocation": "/",
  "outputLocation": "build"
}

• Reference Link: Configure Static Web Apps

Verify Routing Configuration:

If your React app uses client-side routing (such as React Router), ensure you have a routes.json or staticwebapp.config.json file to handle it. It should define fallback routing for the preview environment to prevent 404s.

Example of staticwebapp.config.json for client-side routing:

{
  "routes": [
    {
      "route": "/*",
      "rewrite": "/index.html"
    }
  ]
}

• Try redeploying the app with a slight configuration change in the preview environment, then test it again. Sometimes redeploying with a small change helps reset any broken state.
• Azure Static Web Apps may cache the deployment. Clear the cache in the Azure Portal or redeploy the app with the --no-cache flag (if using Azure CLI).
• Check the deployment logs in Azure to see if there are any errors or warnings during the preview deployment.
• Navigate to Azure Portal > Static Web Apps > Preview environment and check for any error logs under the Logs section.
• You can also run the deployment locally and review logs using Azure CLI:

az staticwebapp environment show --name <app-name> --environment <environment>

If the answer is helpful, please click "Accept Answer" and kindly upvote it.

Answer 2

Dear Shima,

Thank you for the response and the troubleshooting steps. We have tried all the steps but it did not resolved the issue. However, we have updated npm package and it resolved the issue. We have done multiple deployments after updating the package and it worked.

I will update you further if I face the same issue again.

Thank you for the immediate response. Much Appreciated