Share via

How to depoly React project to Azure web app or Web static app

Dean Rezaei 10 Reputation points
2023-12-14T16:39:05.9366667+00:00

I have been trying to deploy my React app to my free plan Azure Web app. I did everything as far as build the app and ftp that to my account, which kind of worked but when I refresh any page it keep saying: "resources not found" then tried Github. create a repository, upload to git hub and then deploy though Azure portal ,but after all the steps it give me this:
"No deployments found. If you have just configured CI/CD, refresh logs to find the latest deployments"

at this point so frustrated and I really think about moving on to AWS. is it because it is a free plan?? if so you need mention that in your documents

Windows for business Windows Client for IT Pros Devices and deployment Set up, install, or upgrade
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,930 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
1,173 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Sedat SALMAN 14,180 Reputation points MVP
    2023-12-14T20:12:24.1033333+00:00

    While Azure's free plan generally supports deploying web apps, certain features or resources might be limited. However, the issues you described don't typically relate to plan limitations.

    React apps, especially those created with Create React App, use client-side routing. When you refresh a page, the server looks for a resource at that URL, which doesn't exist. To fix this, you need to configure your server to always return the index.html file for any route. This setup is known as a "catch-all" route.

    If you're seeing "No deployments found" after setting up CI/CD with GitHub, it's possible that the GitHub Actions workflow hasn't run correctly. Ensure your workflow file in .github/workflows is correctly set up to build and deploy your app. Also, check the GitHub Actions tab in your repository to see if the workflow has run successfully. If it hasn't, there might be errors in the workflow file or issues with the configuration.

    To troubleshoot further:

    • Verify your Azure App Service configuration, particularly for the default document (index.html).
    • Check the GitHub Actions workflow logs for any errors during the build or deployment process.
    • Ensure that your repository's settings and Azure configurations are correctly linked for CI/CD.

    you can follow below thinks further details

    https://css-tricks.com/deploying-a-client-side-rendered-create-react-app-to-microsoft-azure/

    https://learn.microsoft.com/en-us/azure/app-service/deploy-github-actions

    1 person found this answer helpful.

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.