Post
Ask Question

Host A React App On Azure From VS Code

 
Microsoft Azure, which is called Azure, provides cloud computing service created by Microsoft for testing, building, managing applications, deploying, and services through managed data centers.

Azure Web app services are cloud computing-based platform where you can publish or host your websites. It allows multiple frameworks and web applications to be host which is developed in different programming languages.

For more detail about Azure pricing or online price calculator for Azure - Here

In this article, we will learn how to host React applications on Azure.
 
Let's get started,

Step 1 - React Project Setup
 
Create React application using the create-react-app command

Install create-react-app globally
  1. $ npm install -g [email protected]  
Create a New Project
  1. $ create-react-app my-app    
  2. $ cd my-app   
Your newly created React application's folder structure should look like this

 
Run ‘npm start’ command in terminal to launch created app locally. You can access react app on 3000 port of your localhost so open/click on http://localhost:3000 to launch it in the browser to see.
 
 
 
Step 2
 
Create new file web.config on root
  1. <?xml version="1.0"?>    
  2. <configuration>    
  3.  <system.webServer>    
  4.    <rewrite>    
  5.      <rules>    
  6.        <rule name="React Routes" stopProcessing="true">    
  7.          <match url=".*" />    
  8.          <conditions logicalGrouping="MatchAll">    
  9.           <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />    
  10.           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />    
  11.           <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />    
  12.          </conditions>    
  13.          <action type="Rewrite" url="/" />    
  14.        </rule>    
  15.      </rules>    
  16.    </rewrite>    
  17.  </system.webServer>    
  18. </configuration>   
Step 3 - Create a build of your react application

Run 'npm run build' or 'yarn build' in your terminal which will generate a production optimized build of React application into the build folder.

Step 4
 
Now install 'Azure App Service' extension in VSCode.
 
 
 
 

Step 5
 
After installation, select Azure App service tab and click on '+' icon for creating a new web application
 
 
 
 
Step 6
 
Once you clicked on '+' icon, Sign-in popup will come up to authenticate for Azure credentials. if you don't have an account then you can create a free account by signing up - Here
 
 

Step 7
 
Then, you need to choose few options like subscription, unique name of your website Url, and environment of the server (ex. Windows or Linux)
 
 
 
Step 8
 
It will be prompted for deploy or cancel options, you need to choose Deploy option

Step 9
 
Now you need to choose a path of your build folder in application to deploy your application
 
 
Step 10
 
Once the Deployment is process is completed, you can browse your react app service URL (in my case it is https://sample-react-azure-app.azurewebsites.net), You can see now your react application is hosted on Azure server successfully.
 


Similar Articles