Process for React App deployment to Azure Web?

Question

I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/

Landing Page :

I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site. The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321

1. Create the default React App with create-react-app
2. Run "npm run build" to get the build folder
3. Go into the Azure React Portal and create a new Web App ***
4. FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder

5. For overkill I added the below web.config file to handle future routes, but have also tried without this step

In the end my Azure site's contents look like this

Folder contents :

At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?

*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.

Thank you folks for your time.

Answer 1

Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":

pm2 serve /home/site/wwwroot/ --no-daemon

Remember to change the path to your build path (The path to your index.html file).

If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.

pm2 serve /home/site/wwwroot/ --no-daemon --spa

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

I've coped with the same problem recently: React router direct links not working on Azure Web App Linux

Answer 2

You have created a Linux App Service - your web.config won't work because there is no IIS.

If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:

ecosystem.config.js

module.exports = {
    apps: [
        {
            script: "npx serve -s"
        }
    ]
};

https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff

Answer 3

There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:

• Just point the error document to: index.html

I found it out here: https://stackoverflow.com/a/52343542/3231884

Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.