Unable to deploy React JS application on Azure App service

Question

I was going through the some of the links to deploy React Js application on the azure app service. But i am facing some problem while deploying the application.

I have ad

Answer 1

From the log it looks like this is not a Node.js application, but a react application. Therefore react-scripts start is something the Azure App Service doesn't know anything about.

When you run a react app on localhost, it is powered by a development server which indeed is a Node.js server, but once you build it for production using npm run build it is nothing but an index.html file powered by a bunch of .js files and stylesheets. It has no web capabilities in itself.

serve on the other hand is a separate story. As per their description at npmjs.com: Assuming you would like to serve a static site, single page application or just a static file (no matter if on your device or on the local network), this package is just the right choice for you.

But this is not an Azure-like approach.

In production however, if you are using Azure, I recommend using Azure Blob Storage v2, which has static site hosting capabilities. Enable static site hosting in the blob storage and deploy the build folder in a container named $web. Ofcourse all of this is automatically done if you are using vscode with the Azure plugin. Assuming you have signed into Azure thru vscode, right-click on the build folder and select deploy to static site, follow the steps and you will be live with your react app.

However, if you do have a Node.js express backend alongside the react app, then you may put the build folder into the Node.js project at the same level as the node_modules folder and use static routing to have both frontend and backend work as a single package. Explicitly define a route to tell express to respond with the index.html file when asked for. Then you can deploy the whole package into an Azure App Service.

const express = require('express');
const path = require('path');
const port = process.env.PORT || 3006;

const app = express();

app.use(express.json())
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json({extended: true}));

app.use(express.static(__dirname + '/build'));
app.get('/', (req, res) => { 
  res.sendFile(path.join(__dirname + '/build/index.html'))
});

// Then prefix your API endpoints with /api
app.get('/api/user/:id', (req, res) => {
  // Code to get user by id
});

app.post('/api/user', (req, res) => {
  // Code to save user
});

app.listen(port, () => {
  console.log(`App bootstrapped on port ${port}...`);
});

When / is hit, then index.html is served. API calls served as defined with /api/*. I find this mechanism useful many a times.

Good luck.