React App not starting in azure app service

deploying create-react app on microsoft azure
azure devops deploy react app
deploy react app to azure storage
run react app as service
deploy github react app to azure
create-react app azure storage
react-router azure app service
deploy react app to azure from vs code

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?

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.

How to host a React app on Azure. Azure App Service is a PaaS that , Hosting React application on azure app service. Create a react app by running 'npx create-react-app my-app' command. When Prompted, Sign in with your azure credentials or if you do not have credentials, create a free� Azure App Service is a PaaS that allows you to host web, mobile apps, web API’s and logic apps.This article explains about how to host your react app on azure app service.

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)

Deploy React JS Application on Production on azure portal service , Deploy React JS Application on Production on azure portal service page because we are not creating optimized production build for prod environment i.e. we should We are working on a proper static site image on Linux. Deploying a React app to Microsoft Azure is simple. Except that… it isn’t. The devil is in the details. If you’re looking to deploy a create-react-app — or a similar style front-end JavaScript framework that requires pushState-based routing — to Microsoft Azure, I believe this article will serve you well.

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!

How to Deploy a React App to Azure - MSDN, Hey, Node developers! Your app service is up and running. Time to take the next step and deploy your code. The title is a bit misleading in my opinion, you are deploying to a Web App Service, rather then Static Website which is a feature of Azure Blob Storage. Fabio over 1 year ago

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.

Deploying React apps to Azure with Azure DevOps, Lets get started by creating a new React project using the CLI Display name: Azure App Service Deploy: reactblog; Connection type: Azure� Azure DevOps provides all the necessary support to build, deploy and test React.JS apps. It allows us to use multiple frameworks like Mocha and Selenium to be used in collaboration to run automated tests after the app is deployed to an Azure App Service as a web app.

Deploying a Client-Side Rendered create-react-app to Microsoft Azure, So let's go do that. Getting started with App Services on Microsoft Azure. To get started, if you do not already have a Azure account,� Please watch this video. you will come to know how to deploy react js or angular 2 application on the azure cloud using azure DevOps and azure app service. If you face any issue while setting

Deploy your React app to Azure, However, I am going to be running most of my services on Microsoft Azure. I want to Deploy your React app to Azure. April 04 I'm not producing a shortened version since I want you to be extra-sure you want to do that. I create a Web App Service (window , .net core 2.2). I can deploy my react app using Azure DevOps pipeline. I have 2 question: 1. When i try refresh the page e.g /about , it show: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. I try add web.config to site/wwwroot:

Deploy React app to Azure App Service as a SPA, At least step I've created the web.config file for manage the routing of React App. But it seems not working the routing. Because when I try to reach� I have a simple React.js app that works 100% perfectly fine on my localhost. e.g. - clone git repo - go to the root folder of the cloned repo - npm install - npm start and the browser opens up on port 3000. works great! Now, I'm trying to get this app up to an Azure App Service (formally Azure Websites).

Comments
  • No I'm not running anything, isnt that what app service is supposed to do, serve index files by default?
  • it should just run it, thats right. what are you getting instead?
  • Are you using react-router?
  • 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.
  • Sure but the app doesn't load at all.
  • When I add those express scripts to my existing index.js file, and run locally I get an error. The app runs fine locally so won't this conflict?
  • @Batman, I test and get error then install the express module then it worked. You could have a try.$ npm install express
  • I've been two days nonstop setting up my CICD pipelines in az devops and the issue ended up being: the main file has to be named hostingstart.html. @Satheesh solution worked for me.
  • This solution works for me, thanks.
  • this solution took care of both issues, starting the react app and handling react-router issues.