Skip to content
react

How to deploy React application to Microsoft Azure WebApp (App Service)?

May 9, 2022Abhishek EH7 Min Read
How to deploy React application to Microsoft Azure WebApp (App Service)?

In my previous articles, I have explained how to deploy react applications to Google Cloud and AWS.

In this article, we will see how to deploy a react application to the Microsoft Azure cloud.

Project setup

Create a react app using the following command:

1npx create-react-app react-azure-deployment

Create a file named web.config with the following content at the root of the project. This is required only if you have different routes in your application.

web.config
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>

Creating an App Service (Web App)

If you do not have an Azure account, create one using the link https://azure.microsoft.com/en-in/free/

Once the account is created, log in to the Azure portal.

Click on App Services at the top. This will list the available app services.

azure home

If you have created a new account, there will not be any App services to list. So let's create a new one by clicking the plus sign highlighted below:

azure app services

In the screen that follows, provide the following inputs

  • Create a new resource group: codingdeft-react-demo_group
  • Name as codingdeft-react-demo
  • Run time stack: Node 16 LTS (or any latest version)
  • Operating system: Windows
  • Region: East US (or leave as default)
azure create web app

Click on the Review + Create button.

Once the review is completed, click on the Create button.

azure review web app

Wait for some time for the app to be created and the deployment to be done.

Once the deployment is complete, click on Go to resource button.

azure app deployment complete

Now this will open a screen as shown below:

azure app service overview

Here if you click on the URL: https://[your-webapp-name].azurewebsites.net (highlighted above), it will load a page with a default content from Microsoft. We are going to deploy our react app to the same URL.

Creating a DevOps account

To create a pipeline to deploy our code to Azure WebApp, we need to create a DevOps account first. You can create one using the link: https://azure.microsoft.com/en-us/services/devops/

Once signed up, it will redirect to a page as shown below:

azure devops continue

Click on Continue.

azure devops create org

Provide the organization name of your choice, solve the captcha, and click on Continue.

In the following screen, provide the project name as react-azure-deployment and click on Create Project

azure devops create project

Once the project is created click on Repos on the left:

azure devops repos

Now commit your code from the command prompt by navigating to your project directory and running the following command:

1git init
2git add .
3git commit -m "first Commit"

Once the commit is completed, navigate to the Azure DevOps and copy the command from the second option and run it in the command prompt.

azure devops push existing repo

It may show a popup to log in to your account. Once logged in the code will be pushed to the DevOps.

You can confirm it by refreshing the DevOps portal:

azure devops committed code

Creating a build pipeline

Before deploying, we need to build the code. We will automate the build process by creating a pipeline for it.

Click on Pipelines on the left:

azure devops pipelines

Click on Create Pipeline.

azure devops create pipeline

Click on Use the classic editor link highlighted below:

azure devops classic editor pipeline

Select the source (leave as default) and click on Continue

azure devops select source

Now click on Empty Job at the top:

azure devops empty job

On the next screen, click on the Plus sign next to Agent Job 1

azure devops agent job

Now search for npm and click on Add

azure devops search npm

This will add an npm install step.

Click on Add again on npm and update it with the following details:

  • Display Name: npm build
  • Command: custom
  • Command and arguments: run build
azure devops npm build task

Now search for Publish build artifacts and add it to Agent job 1.

azure devops publish artifacts step

Here update the Artifact name to build

azure devops publish build

Click on the Triggers tab at the top and check the option Enable continuous integration and choose the branch you want to build.

This will ensure that each time you push a change to the specified branch, a build will be triggered automatically.

azure devops add build trigger

Now click on Save and Queue at the top. Add a Save comment and click on Save and run.

If you are building for the first time, you will get the following error:

1No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following form https://aka.ms/azpipelines-parallelism-request

You can go to https://aka.ms/azpipelines-parallelism-request and request for parallelism grant and it would take 24 to 48 hours for approval.

Once you got the parallelism grant, you can retrigger the build by opening the pipeline and clicking on Run pipeline at the top.

azure devops run pipeline

Once the build is completed you should be able to see a similar screen as shown below:

azure devops add build success

Deploying the code

Now the code is built, we can deploy it to WebApp.

Click on Releases at the left.

azure devops releases

Now click on New pipeline

azure devops new release pipeline

From the templates, select Azure App Service deployment and click Apply:

azure devops app service deployment

When asked for stage give as Production and close the modal.

azure devops stage prod

Click on Add an artifact and choose the Source as shown below:

azure devops add release artifact

Now click on Add button.

Click on the lightning symbol in the Artifact section and enable the Continuous deployment trigger. Add a filter and choose the branch from which the code needs to be deployed and close the modal.

azure devops enable continuous deployment

This will ensure that the deployment gets triggered each time there is a build created for the master branch.

Now click on the Tasks tab and choose the Azure subscription. It will ask you to authorize. Click on Authorize

azure devops authorize pipeline

Once authorized, choose the WebApp.

azure devops release app service

Now click on Deploy Azure App Service and click on the three dots next to Package or folder

azure devops release deploy step

Select the drop folder and click Ok

azure devops select drop

Now click on Save at the top. Don't change anything in the popup and click Ok.

Now click on Create release at the top, next to the Save button:

azure devops create release

In the popup that follows, do not change anything and click on Create.

Now a release will be queued and you will see a message as shown below

azure devops release queued

Clicking on the link on the message should take you to the release details page, where you can see the deployment progress.

Once the deployment is complete, you should be able to see a success screen as shown below:

azure devops release succeeded

Now if you access https://[your-webapp-name].azurewebsites.net (https://codingdeft-react-demo.azurewebsites.net/ in my case), you should be able to see your code deployed.

If you have liked article, stay in touch with me by following me on twitter.

Leave a Comment

© 2022 CodingDeft.Com