In this blog you will read about how to deploy your React Web App in Azure App Service.
Requirements
npm >= 6.5node >= 10.12.0Git
Create Basic React App
Initializing React App
If you've previously installed
create-react-appglobally via npminstall -g create-react-app, we recommend you uninstall the package usingnpm uninstall -g create-react-apporyarn global remove create-react-appto 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.
initializerin this case is an npm package namedcreate-<initializer>, which will be installed bynpx, and then have its main bin executed -- presumably creating or updatingpackage.jsonand 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 buildof 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.
Top comments (0)