4

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 : enter image description here

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 : enter image description here

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.

steve stevenson
  • 43
  • 1
  • 5

3 Answers3

16

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

Lutti Coelho
  • 2,134
  • 15
  • 31
  • Does deploying like this allow React to pick up environment variables? – Rob Jul 27 '20 at 05:49
  • Yes, you can configure your environment variables on azure webs > settings – Lutti Coelho Jul 29 '20 at 17:29
  • @LuttiCoelho - It doesn't seem to work - my app is NOT picking up the env variables I am setting in the configuration. The only settings I see in the deployed App are those defined in the .env-file... – Martin Frank Moesby Petersen Nov 04 '21 at 08:51
  • Hi @MartinFrankMoesbyPetersen. A React application can't get information from env variables setted on the server. Are you deploying a bff together with the react app? If your are not deploying any backend application this behavior is expected – Lutti Coelho Nov 06 '21 at 00:41
  • @LuttiCoelho - Damn... thank you for the reply (even if it was not what I was hoping for). Can I ask if you could point me to a guide on, how to do that? I just deploy my optimized build to the Azure Web App and serve it up with "pm2 serve"... – Martin Frank Moesby Petersen Nov 06 '21 at 06:58
  • Hi @MartinFrankMoesbyPetersen I'm not sure if I understand what is your problem. You want to get enviroment variables setted on azure web app in your React application? Or you have another problem? – Lutti Coelho Nov 08 '21 at 12:30
3

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

Alex AIT
  • 17,361
  • 3
  • 36
  • 73
  • I didn't tried that because I found this answer https://stackoverflow.com/a/59310584/3112872 that looks much more easier. – Lutti Coelho Apr 23 '20 at 00:00
-1

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.

Luis Gouveia
  • 8,334
  • 9
  • 46
  • 68
  • This is terrible for SEO and should not be used as there are other solutions just as simple as yours. – Lutti Coelho Sep 04 '20 at 02:01
  • @LuttiCoelho you probably didn't take the time to read my answer until the end. There's a Disclaimer that says just that. – Luis Gouveia Sep 04 '20 at 06:33
  • I've read to the end. Even considering your disclaimer I don't agree that this solution should be considered in any case. In Brazil we call this kind a solution as "gambiarra". Please take a moment and search for it. – Lutti Coelho Sep 04 '20 at 12:10
  • 1
    @LuttiCoelho, 89 people don't agree with you on the original answer. You can check it yourself by clicking the link. It is indeed a gambiarra, I agree. In Portugal we call it "um remendo". I ended up doing something better myself (1 or 2 weeks later) but it was nice to implement this quickly to avoid having the website partially down. – Luis Gouveia Sep 04 '20 at 12:22
  • 1
    the original answer is about handle the route problem in amazon S3. AFAIK there is no way to handle this problem without having a a reverse proxy between the browser and the app hosted on S3, so the 404 redirecting to index is acceptable to solve it while you don't have a reverse proxy to do this. If this question was about handle react router in azure blob storage, probably your answer will be very well voted too. But on Azure Web Apps (Linux or Windows) we have better ways to cope with it. Thats why I down vote your answer. – Lutti Coelho Sep 29 '20 at 11:16
  • 1
    But please be aware that I'm *NOT* the owner of truth. Let's wait and see if anyone agree with you. You have a very good reputation on SO, one down vote is not the end of the world. – Lutti Coelho Sep 29 '20 at 11:16