36 C
Friday, September 22, 2023

How to Deploy a React app to Azure using DevOps Pipelines


  • An Azure account with active subscription.
  • Azure DevOps (https://dev.azure.com/)
  • Code editor (Vscode.)
  • Node.js (Install the required npm package)

Step 1: Creating the React App and Test Locally.

  • mkdir App
  • cd App
  • create the app using — npx create-react-app <app-name>.

after install react application see below image

Cd into the app and start the app using -- npm start.

This will open a browser http://localhost:3000/

Step 2: Configure Azure App Service.

Login into https://portal.azure.com

  • Create an App Service with a basic B1 App service Plan.

copy default domain link past localhost

see there are no applications then go to azure devops

Step 3: Create the Azure DevOps Project and connect to the App service instance.

Login into https://dev.azure.com/ and create a new project

Setting up a Service Connection

To connect to the App Service from DevOps, we will need to first setup a service connection. Start by opening up DevOps, and select “Project Settings”.

In the Pipelines section, select “Service Connections” and hit the “Create service connection” button.

We will select “Azure Resource Manager” as the type, and hit next

Keep “Service Principle (automatic)” as the Authentication method.

Keep “Subscription” as the scope and make sure the correct one is selected. Then make sure to choose the same Resource Group that you created for the App Service above. We will also need to create and note a “Service Connection Name” that you will be using in the pipeline next. After you are finished, hit “Save” to create your service connection.

Click on repos to copy the Git credentials on a notepad.

Push from the local to remote repository using the below git commands on Git bash.

git init
git add .
git commit -m “<commit message>”
git remote add origin <url to your Azure DevOps repo>

This brings a prompt, login into your Azure DevOps portal then this shows that the App has been push to the Azure repo.

Step 4: Create a Build Pipeline.

To connect the pipeline to the App service instance created.

  • Create pipeline.
  • Choose Azure repose (YAML)

Choosing Node.js Express Web App on Linux on Azure

Using below YAML – azure-pipelines.yml code

# Node.js with React

# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

- master

  vmImage: ubuntu-latest

- task: NodeTool@0
    versionSpec: '18.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: ArchiveFiles@2
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

As you can see below, running this store my build to Azure Artifact where Azure Releases can use them.

Step 5: Creating the release pipeline and Deploying to Azure

This is to push the code from the build pipeline from CI/CD to Azure Web App.

Enable continuous integration on the project

Choose azure app service deployment

The startup command set to

pm2 serve /home/site/wwwroot/build --no-daemon --spa

click to save then run pipelines

succeeded Pipelines

Now we have a successful deployment, we can navigate on to the Web App URL simplereactappp.azurewebsites.net which should be running

I have been working as Cloud engineer in System Administration field in Microsoft Azure, Microsoft Office 365 / Exchange Servers / Endpoint Manager / Azure Active Directory (IAM) / PowerShell

Related Articles


Please enter your comment!
Please enter your name here

× How can I help you?