React App not starting in azure app service

Question

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?

Answer 1

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!

Answer 2

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)

Answer 3

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.

Answer 4

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.

Answer 5

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.