DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Deploy React App with Azure App Service.
Debopriya Dey
Debopriya Dey

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Usage

In the project directory, you can run:

npm start
Enter fullscreen mode Exit fullscreen mode

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

reactApp

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

npm build
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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}`);
});
Enter fullscreen mode Exit fullscreen mode
  • Update the script in your pakage.json to use nodemon
"scripts": {
    "dev": "nodemon index.js"
  },
Enter fullscreen mode Exit fullscreen mode
  • Open cmd from the project folder and type the cmd type
npm run dev
Enter fullscreen mode Exit fullscreen mode

Create Azure App Services

  1. Login to Azure Portal and navigate to azure app services
  2. Create a new app service createAppService

Deploy Node App in Azure App Service

Create a build of the react and route to Node app

  1. Create a build using npm run build of the frontend and add the build folder to your Node app
  2. 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'));
});
Enter fullscreen mode Exit fullscreen mode
  1. Test the application locally
  2. Replace the script block in pakage.json with the below code
"scripts": {
    "dev": "nodemon index.js"
  },
Enter fullscreen mode Exit fullscreen mode

Deploying through github

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

deployCenter


Related Blogs

Top comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout πŸ˜†