Deploy React App with Azure App Service.
Tags: azure, devops, react, node
Published: 2022-11-09 04:47:25

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](http://localhost:3000) to view it in your browser.

![reactApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kytq7aoxc6vg09hf76kq.png)


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

1. Login to Azure Portal and navigate to azure app services
2. Create a new app service
![createAppService](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/296g4ii2s9wft0kjc5fx.png)

---

## 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'));
});
```     
3. Test the application locally
4. Replace the script block in pakage.json with the below code 
```
"scripts": {
    "dev": "nodemon index.js"
  },
```
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckcr200d3c5z9e469yxz.png)

---

## Related Blogs
* [Create a Node and Express AWS Lambda function](https://dev.to/debopriyadey/create-a-node-and-express-aws-lambda-function-gb5)
* [Add free SSL Certificate in Hostinger using ZeroSSL.](https://dev.to/debopriyadey/add-free-ssl-in-hostinger-using-zerossl-533l)