Deploy React App with Azure App Service.

In this blog you will read about how to deploy your React Web App in Azure App Service.

Requirements

npm >= 6.5
node >= 10.12.0
Git

Create Basic React App

Initializing React App

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.on

Run this command to create a React application named lob-dev-app:

npx create-react-app lob-dev-app

The create-react-app will set up everything you need to run a React application.

Now you are ready to run your first real React application!
Run this command to move to the my-react-app directory:

cd lob-dev-app

Usage

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

npm build

This creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html

Create Nope App

Initializing Node App

npm init <initializer> can be used to set up a new or existing npm package.

initializer in this case is an npm package named create-<initializer>, which will be installed by npx, and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.

Open Your Terminal and type

npm init

Guide you through a questionnaire to setup the project
A package.json with all the project details will be generated
Install some important pakages using this command

npm i body-parser cors express nodemon

Create a index.js in the same project directory

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

const cors = require('cors');
app.use(cors());
app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: false,
  })
);

app.get('/hello', (req, res) => {  
  res.send('Hello Server!')
});

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin",  "http://localhost:3000");
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT,PATCH");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
})

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {

    console.log(`Server listening at ${PORT}`);
});

Update the script in your pakage.json to use nodemon

"scripts": {
    "dev": "nodemon index.js"
  },

Open cmd from the project folder and type the cmd type

npm run dev

Your server is running on localhost port 4000
Go to browser and open http://localhost:4000/hello

Create Azure App Services

Login to Azure Portal and navigate to azure app services
Create a new app service

Deploy Node App in Azure App Service

Create a build of the react and route to Node app

Create a build using npm run build of the frontend and add the build folder to your Node app
Install package named path in node app and add route for your build index.html in build folder

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

Test the application locally
Replace the script block in pakage.json with the below code

"scripts": {
    "dev": "nodemon index.js"
  },

Deploying through github

After the app is created then navigate to resources and then to the recently created service
In the left panel navigate to Deployment center
Connect your github account and map the repository and branch. Save the changes
From your local machine push the updated node app.
Check your github repo action there it will be automatically deployed to azure app.
Hit the url to check you app.

Blog