A Guide to Host a React JS Application in Azure

As we know, There are a lot of services that you can use to host a react application. As examples Firebase, AWS, Azure, Netlify, Heroku, Github Pages and many more. Today, I’m gonna talk about how you can host a react project, easily in azure.

To proceed, you need to have two things. An Azure account and a React JS project. If you don’t have these two, follow the steps below.

Step 1 — Create an Azure Account

https://azure.microsoft.com/en-us/

Click on the link. And then, Click on the “Start Free” button to proceed.

Click on the “Start free” button

And when you are done with this step, let’s move to the second step.

Step 2 — Create a React JS Project

This is easy. You only have to execute a simple command in your machine.

npx create-react-app react-azure-test

Execute this command and you will have a fresh react project.

Configure the Azure Portal

Now you have both requirements. So, We are good to go. First, let’s start with the Azure portal. Head over to your Azure portal. (https://portal.azure.com) And below, I have listed the steps you need to follow.

Step 1 — Create a resource group

This is the main window that you are gonna get.

Click on the button Resource groups. This will take you to the resource group window. At there, click on the Add button on the top left. Now fill the form as below.

Give a name that you prefer to the resource group

After that, click on the Review + create button to proceed (Tags are not important for this tutorial).

Step 2 — Create an App Service, App Service Plan, and an Application Insight

Navigate into the new resource group. Now we need to create necessary resources (A web app, An app service plan, and an Application insight) inside this resource group. So click the Add button on the top left. From the list, select Web App.

Select the “Web App” option

Fill the form like below. Give a proper name to the web app. I have given the app-react as the name. Azure will append azurewebsites.net to the end.

Give a proper name for your web app

Scroll down to the bottom. Now you need to do some selections. For this tutorial, those selections are not that much important. You can do the same as I did. The important thing is the Windows plan, in other words, the app service plan. Azure will automatically create a plan for you. If you want, you can create a new plan. I’m gonna keep the default one since it’s free.

Do those selections

After filling the form, click Next: Monitoring>. Now, in the next window, we have been given the chance to create an application insight. This is important when it comes to monitoring the application. I’m not gonna talk about monitoring in this article. But let’s create an application insight too. The best thing is azure automatically filling the form. So you don’t need to change anything here.

create an application insight

After filling these fields, click the Review + create button. Again tags are not important here. After a while, you can see the 3 resources are created in your resource group.

Step 3 — Create a Git repo in the App Service

Click on the web app (App service) app-react. And then, click on the Deployment Center on the side menu. There are some configurations need to be done inside this app.

Here, you can see there are multiple ways to deploy a local application. I’m gonna continue with the Local Git option. Select that and hit Continue.

In the next window, select App Service build service and hit continue.

And click Finish in the last window.

What happens here, Azure creates a git repo. By using that remote link, we can push our code directly into the App Service( Web app) the same as we are pushing it to GitHub.

There are some additional configurations needs to be done. We need to create a user to perform this git actions. Click on the Deployment Credentials button. And navigate to the User Credentials tab. Create a user there.

Copy the remote URL. In my case, It is https://app-react.scm.azurewebsites.net:443/app-react.git

Okay. We are good with azure. now we can move to the react project.

In this method, we are not gonna deploy the whole project into azure. Instead, we are gonna publish only the build folder. Before that, we have to add some codes in our react application

Configure the React Application

Step 1 — Add node version in package.json

First, find out what your node version is. Open the gitbash and run the following command

node -v

In my machine, the node version is 10.16.3. So in the bottom of the package.json, I’m gonna add the following command

“engines”: { 
   “node”: “10.0” 
}

Add the code like this.

Step 2 — Add a web.config file in the public directory

Before publishing the project, we need to add a web.config file. Otherwise, you gonna get this error.

The resource you are looking for, has been removed, had its name changed, or is temporarily unavailable

So add a web.config file in the public folder and add the following code.

<?xml version="1.0"?> 
  <configuration> 
    <system.webServer> 
      <rewrite> 
        <rules> 
          <rule name="React Routes" stopProcessing="true"> 
             <match url=".*" /> 
             <conditions logicalGrouping="MatchAll"> 
               <add input="{REQUEST_FILENAME}" matchType="IsFile"   negate="true" /> 
               <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
               <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
             </conditions> 
             <action type="Rewrite" url="/" /> 
          </rule> 
        </rules> 
      </rewrite> 
   </system.webServer> 
</configuration>

Step 3 — build the project

Now we have configured the react application. let’s build the application. Open the terminal and run the following code

yarn build

Now you can see the build folder in your project.

Step 4 — Push to Azure App Service

Cool. Now we need to push this application into the Azure app service. Since we select the Local Git option, this is the same as pushing into GitHub repo.

But first, It’s better to delete the .git folder in your project folder. It’s hidden. Go ahead and delete that folder.

Now, open the terminal and navigate into the build folder. Here, we need the remote URL from azure. We copied it earlier. I’m gonna use my one. You can use your remote URL

git init
git add .
git commit -m "Initial Commit"
git remote add azure <git remote URL>
git push azure master

Now, Azure will ask to authenticate the user. Use the credentials that you create before.

Congratulations!! You have successfully hosted the react application in azure app service. Now to check the application, go to the App service URL. You can collect the URL in the Azure portal. go to

your resource group -> app service

You can see the URL in the top right corner

Here is my URL

Click on that URL. It will take to the hosted react application

Hosted Application

Hope this article helps you to get an understanding of hosting. Your thoughts and comments are always welcome.