Deploying React apps to Azure with Azure DevOps

Developer Support

January 10th, 20207 0

In this post I will walk you through the steps of publishing your React SPA application into Azure using Azure DevOps. One of my favorite quotes is from the Chinese philosopher Confucius where he says: “I hear and I forget. I see and I remember. I do and I understand.” So, feel free to follow along as I believe you will get some added benefit from it.

First of all, let me introduce myself. My name is Sidi Merzouk and I’m Dev Consultant at Microsoft. In my role here at Microsoft I focus on Open Source and ALM (application life cycle management). You may also know me from my previous blog post Using Azure DevOps Rest API with Nodejs to retrieve project permission.

Here a list of requirements if you’ve decided to follow along:

Lets get started by creating a new React project using the CLI (command line interface). From the command prompt (window terminal/terminal/shell…etc) you can navigate to a directory of your choice and run the following command: npx create-react-app az-demo

Once the project gets created, let’s navigate to the project from the command line and open it with Visual Studio Code.

The structure of your project should look something like this:

There is a starter script inside our package.json which will build and run our application. From the command line run the following command:

$ npm start

This should’ve run and automatically opened a browser for you with the out of the box react logo.

Let’s open App.js file and modify <p> tag to say “Hello World” instead “Edit src/App.js and save to reload.”

Step 2:

Create a project in your Azure DevOps organization. I named it “React Demo”

Press on the repo’s tab to navigate to the repo. Once there let’s use the link provided to push our react project.

Your repo would look something like this:

Step 3:

Let’s click on “create a pipeline” and choose “use the classic editor” and choose start with an “empty job”

Press on the Agent job 1 and let’s add two npm tasks and publish artifacts task.

We can leave the npm install task as it is. For the second one let’s rename the task npm run build under command choose from the dropdown “custom” and for the “command and argument” enter “run build”

 

Npm install: will install all the react library (dependencies) it’s the equivalent of a dotnet restore to restore the nuget packages.

Npm run build: will create a build folder that we will then use to publish our application.

Click on the publish task and set the “path to publish” to build, so that our release pipeline we’ll have access to the generated build.

This is the moment of truth if everything worked as expected this should create a build archive at the end, so let’s save and queue to test it out.

Step 4:

Let’s create an App service to deploy our application to, we can do that from the https://portal.azure.com and by choosing “Web Apps” -> “Create app service”:

  1. Choose your free subscription
  2. Create a new resource group (e.g: I named mine “react-blog”)
  3. Give a unique name for your application
  4. Choose publish as “Code”
  5. Choose runtime stack “Node 10.14”
  6. Choose “Windows” operating system
  7. Choose the closest region to you (e.g: EastUS2)
  8. Hit review and create to start provisioning
Step 5:

Let’s navigate back to Azure DevOps > Pipelines and create a new release. Once, there choose deploying choose “Azure App Service Deployment.”

You can then give your stage a name. Mine I named it “Production” and let’s press on “add an artifact”, and choose your pipeline and the artifact that was generate when you ran the pipeline.

Once set you can press the button “Add” to add the artifact.

Now, click on the “1 job, 1 task” under your stage and select the “Deploy Azure App Service” task. You will see some red underline saying setting is required that’s because we need to setup our service connection. So, let’s go ahead and press on manage which will open up a new tab for us.

So here we are going to choose “Create service connection” -> “Azure Resource Manager”.

  1. Connection name (I always choose to enter my Azure Subscription since it will help me track it later)
  2. Select the appropriate Azure Subscription
  3. Select the Resource Group that has your “App service”

The result should look similar to the below image.

Let’s go back to our release tab and finish up:

  • Display name: Azure App Service Deploy: reactblog
  • Connection type: Azure Resource Manager
  • Azure subscription: Visual Studio Enterprise
  • App Service type: Web App on Windows
  • App Service name: reactblog
  • Package or folder: $(System.DefaultWorkingDirectory)/_React Demo-CI/drop

Go ahead and create a release from the pipeline created. If you visit the Azure WebApp URL, you should now see your website 😊

Et Voila!

If you are using client-side routing, you’ll need to add the following file “web.config” and add the following to it:

<?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>

Happy hacking!

Developer Support App Dev Customer Success Account Manager, Microsoft Developer Support