Host A React App On Azure From VS Code

Microsoft Azure, which is known as Azure, offers cloud computing service created by Microsoft for testing, constructing, managing purposes, deploying, and companies by way of managed information facilities.

Azure Internet app companies are cloud computing-based platform the place you may publish or host your web sites. It permits a number of frameworks and net purposes to be host which is developed in numerous programming languages.

For extra element about Azure pricing or on-line worth calculator for Azure – Right here

On this article, we are going to learn to host React purposes on Azure.

Let’s get began,

Step 1 – React Undertaking Setup

Create React software utilizing the create-react-app command

Set up create-react-app globally

1. $ npm set up -g create-react-app@3.4.1  

Create a New Undertaking

1. $ create-react-app my-app    
2. $ cd my-app   

Your newly created React software’s folder construction ought to appear to be this

 

Run ‘npm begin’ command in terminal to launch created app regionally. You’ll be able to entry react app on 3000 port of your localhost so open/click on on http://localhost:3000 to launch it within the browser to see.

 

 

 

Step 2

 

Create new file net.config on root

1. <?xml model=“1.0”?>    
2. <configuration>    
3.  <system.webServer>    
4.    <rewrite>    
5.      <guidelines>    
6.        <rule identify=“React Routes” stopProcessing=“true”>    
7.          <match url=“.*” />    
8.          <circumstances logicalGrouping=“MatchAll”>    
9.           <add enter=“{REQUEST_FILENAME}” matchType=“IsFile” negate=“true” />    
10.           <add enter=“{REQUEST_FILENAME}” matchType=“IsDirectory” negate=“true” />    
11.           <add enter=“{REQUEST_URI}” sample=“^/(api)” negate=“true” />    
12.          </circumstances>    
13.          <motion kind=“Rewrite” url=“/” />    
14.        </rule>    
15.      </guidelines>    
16.    </rewrite>    
17.  </system.webServer>    
18. </configuration>   

Step 3 – Create a construct of your react software

Run ‘npm run construct’ or ‘yarn construct’ in your terminal which is able to generate a manufacturing optimized construct of React software into the construct folder.

Step 4

 

Now set up ‘Azure App Service’ extension in VSCode.

 

 

 

 

Step 5

 

After set up, choose Azure App service tab and click on on ‘+’ icon for creating a brand new net software

 

 

 

 

Step 6

 

When you clicked on ‘+’ icon, Signal-in popup will come as much as authenticate for Azure credentials. if you do not have an account then you may create a free account by signing up – Right here

 

 

Step 7

 

Then, you must select few choices like subscription, distinctive identify of your web site Url, and setting of the server (ex. Home windows or Linux)

 

 

 

Step 8

 

Will probably be prompted for deploy or cancel choices, you must select Deploy possibility

Step 9

 

Now you must select a path of your construct folder in software to deploy your software

 

 

Step 10

 

As soon as the Deployment is course of is accomplished, you may browse your react app service URL (in my case it’s https://sample-react-azure-app.azurewebsites.internet), You’ll be able to see now your react software is hosted on Azure server efficiently.