React App not starting in azure app service

8
votes

I've deployed a simple react app to azure app service and it won't start:

How do I get the app to run index.html?

enter image description here

5
javascriptreactjsazureazure-web-app-serviceazure-app-service-plans
No I'm not running anything, isnt that what app service is supposed to do, serve index files by default? – Batman
it should just run it, thats right. what are you getting instead? – 4c74356b41
Are you using react-router? – technogeek1995
If you're using react-router, Azure App Service Linux Host uses an HTTP server to proxy your code to the web. You need to set up URL re-write rules. You do this because if you have a react-router url (/about), when a user refreshes the page, the HTTP server will try to load a file called /about, but that files doesn't exist, which will result in a 404 error. The URL re-write rules will change this behavior. It will instead load index.html, /about will show the correct page from react-router. Here's a link to the answer. – technogeek1995
Sure but the app doesn't load at all. – Batman

5 Answers

5
votes

If you deployed to a Node Linux Web App the default document would be hostingstart.html located in /home/site/wwwroot/.

According to this:

When you create a Node.js app, by default, it's going to use hostingstart.html as the default document unless you configure it to look for a different file. You can use a JavaScript file to configure your default document. Create a file called index.js in the root folder of your site

So go to your ssh terminal, navigate to /home/site/wwwroot. Create index.js there with the following code:

var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup

Restart, it will configure index.html as the default document for your app.

19
votes

add this command in your azure dashboard > Configuration > Startup Command

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

and restart your server. This fixed it for me!

13
votes

You don't need to install express and configure index.js as mentioned in other answers since that needs config change and not sure whether app scaling event will retain those installations in new instance.

Easy way is to use pm2 since that is already part of stack. Pass the below startup command for the app

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

Once we restart, it should pick the pages from the docroot (/home/site/wwwroot)

7
votes

Go to Azure Configuration>General Settings

  • If your build folder is at the root of the project

Start up command: pm2 serve /home/site/wwwroot --no-daemon --spa

  • If your build folder is inside your client folder, just add the path

Start up command: pm2 serve /home/site/wwwroot/client/build --no-daemon --spa

Note:

Make sure your using Azure App Service linux server.

I added --spa at the end to fix the issue of react-router redirect, Using --spa will automatically redirect all queries to the index.html and then react-router will do its magic.

2
votes

So thanks to Burke Holland. The easiest is to create a build folder running

npm run build

Then you copy your build folder into your destination and add a "ecosystem.config.js" file. 

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

See this link for more information: https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff

Note: This works for a deployment to a Node Linux App Service instance in Azure. No client side routing configuration needed with this approach!

For Windows App service you can create a config file for configuring your client side routing.