I recently had to serve a React app with an ExpressJS server on Microsoft Azure App service. In this article, I outline the steps I took to successfully achieve this.

Let us first create a React app using create-react-app. Execute the command below in your terminal to create a React app.

npx create-react-app azure-app

Move into the azure-app directory and start the React app:

cd azure-app
npm start

Open your browser at http://localhost:3000 to see the app as shown in the picture below:

Let's make a very simple change to the app and restart. Change the text "Edit src/App.js and save to reload" in src/App.js to "We are deploying to Azure" and save the file. The App should now show the new text. We can now stop the azure-app and move on to creating the express server.

Let us now create an Express server to serve the build artifacts of the React app. Create a directory called "appserver" inside the azure-app.

mkdir appserver
cd appserver

Now create a package.json using NPM:

npm init -y

Create a file called index.js and add the following contents to the file:

const express = require("express");
const path = require("path");

const app = express();
app.use(express.static(path.join(__dirname, "build")));
app.get("*", (req, res) => {
 res.sendFile(path.join(__dirname, "build", "index.html"));
});
const port = 3000;

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

This Express server is supposed to serve the artifacts generated when we later build our React app. For now let's install express in the current appserver project.

npm install express --save

Open the "package.json" file and make sure the content is similar to as shown below (notice the "start" script):

{
  "name": "appserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Now let us build our React app and copy the build directory to the appserver directory. Execute `npm run build` in the azure-app directory:

npm run build

This command should generate a folder called "build" inside the azure-app directory. Copy the build directory into the appserver directory. 

Move into the appserver directory and execute start the Express server:

cd appserver
npm start

Now open your browser to http://localhost:3000 to see the Express server serving the React build artifacts. You are now ready tp package the contents of the appserver and deploy it on Azure App service. One minor change is required in the index.js file to enable Azure to successfully deploy the app. Update the port as shown below before deploying to Azure app service.

const express = require("express");
const path = require("path");

const app = express();
app.use(express.static(path.join(__dirname, "build")));
// const port = 3000;
const port = process.env.PORT;

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

You are now ready to deploy to Azure app service!