How to Deploy a React app to Azure using DevOps Pipelines

Prerequisites:

• 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>.

  npx create-react-app  

  cd my app  

  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 “

  git commit -m “ new file ”  

git remote add origin

  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; there are two methods.

Method 1 :

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

trigger:
- master

pool:
  vmImage: ubuntu-latest

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

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

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

- task: PublishBuildArtifacts@1
  inputs:
    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

Method 2

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

   trigger:
- master

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: 'xxxxxxxxx'

  # Web app name
  webAppName: 'xxxxx'

  # Environment name
  environmentName: 'xxxxx'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

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

    - script: |
        npm install
        npm run build --if-present
      displayName: 'npm install, build'

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

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: xxxxx'
            inputs:
              azureSubscription: 'xxxxx'
              appType: 'webAppLinux'
              appName: 'xxxx'
              deployToSlotOrASE: true
              resourceGroupName: 'xxx'
              slotName: 'production'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|18-lts'  

Successful Deploy