Deploying React.js application to Azure App Service with Azure DevOps

4 minute read | By Susanna Are

Steps to publish your React Single Page Application into Azure App Service using Azure DevOps


This blog would help setting up your Azure DevOps project creation, repository management, configuring the build and release pipeline, and CI/CD enablement.


Let’s get started by creating a new React project using the CLI (command line interface), you can navigate to a directory of your choice and run the following command:

npx create-react-app az-demo

create command

Once the project gets created, let’s navigate to the project (cd az-demo) from the command line and open it with Visual Studio Code

code .

vscode command

The structure of your project should look something like this:

project structure

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

npm command

Open your browser and access the application via localhost:3000


Let’s open the App.js file and then modify Devops Demo like below and finally save to reload

edit app.js

Run npm start and then you should see that the application is running

app run

Reload the browser and access the application again to view the modified content via localhost:3000


Navigate to and create a new project in your Azure DevOps organization. I’ve named it “React Demo”.

azure devops project

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


Let’s click on “create a pipeline” and choose “use the classic editor”

classic editor

Select the Azure Repos Git option and then click on continue

Azure Repos Git

Select start with an “empty job” option

Empty Job

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

Agent Job

Create all the required tasks and then Save each task added to the pipeline

a. npm install: This will install all the react library (dependencies)

We can leave the npm install task as it is

npm install

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

Let’s rename the second task to “npm build”. Under command choose “custom” from the dropdown and enter “run build” under “Command and arguments”.

npm run build

c. Publish Artifact: Click on the publish task

publish artifact

Set the “Path to publish” to build, so that our release pipeline will have access to the generated build.

path to publish

Click on the Run pipeline option. This should create a build archive at the end. Next let’s Save and Run to test it out.

Run pipeline

You should now see the newly created pipeline and its status as queued to be run.

queue to be run

Now that the build pipeline has succeeded, we should be able to see the published artifact.

build succeeded

Click on Edit pipeline option

edit pipeline

Let’s enable Continuous Integration for this pipeline.

enable CI

And then click on Save & queue

save and queue

I have also created an app service ReactDeleteDemo

app service

Navigate back to your Azure DevOps Pipelines and create a new Release


Select the “Azure App Service Deployment” template

Deploy task

You can then give your stage a name. I’ve named mine as “Dev”.

stage Dev

Let’s click on “Add an artifact”. Then choose your pipeline and the artifact that was generated when you ran the pipeline. Once you select the artifact, click the “Add” button

Add an artifact

Double-check to see if CI/CD is enabled properly.


Now, click on the “1 job, 1 task” option under your stage and select the “Azure App Service Deploy” task


Select the appropriate Azure Subscription, Resource Group, App Service Name and required startup commands.

deploy task

You could also add any App Settings as required

app setting

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

web app

Test CI/CD by changing the code

Modify your source code by adding some more text and run npm start

source snippet

Verify the results on your local browser


To commit the changes to the repository, please run the below commands

git add .

git status

git commit -m “second commit”

git commit

git push -u origin –all

The last command will push the source code to the repository

git push

Upon the push to the repository, we should see the CI/CD has triggered

trigger CI/CD

We should then see that the Build pipeline has succeeded

build success

The release pipeline should automatically be triggered.

release pipeline

The deployment should complete successfully like below

deployment success

Happy Learning!!