Step-by-Step Guide: Setting Up a React CI/CD Pipeline with Azure DevOps and Azure App Service

by

Implementing a continuous integration and continuous deployment (CI/CD) pipeline for a React application can significantly streamline your development process. Using Azure DevOps combined with Azure App Service offers a robust solution for deploying React apps efficiently. This guide provides a step-by-step approach to setting up this pipeline from scratch.

Prerequisites

  • An Azure account with an active subscription
  • Azure DevOps organization and project
  • Basic knowledge of React, Git, and Azure services
  • Node.js and npm installed locally

Step 1: Prepare Your React Application

Ensure your React application is ready for deployment. Run npm run build to create an optimized production build. Confirm that the build folder (usually build/) contains all necessary files.

Step 2: Set Up Azure App Service

Navigate to the Azure portal and create a new Web App:

  • Click on “Create a resource” and select “Web App”.
  • Configure app name, subscription, resource group, and runtime stack (choose Node.js).
  • Review and create the app.

Step 3: Configure Azure DevOps Repository

Push your React project to Azure Repos or connect an existing repository to Azure DevOps. Ensure your code is version-controlled and accessible for pipelines.

Step 4: Create a Build Pipeline

In Azure DevOps, create a new pipeline:

  • Select your repository.
  • Use the YAML pipeline template or start from scratch.
  • Define tasks to install dependencies, run tests, and build the project.

Sample YAML snippet for build pipeline:

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

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

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

  - publish: $(Build.ArtifactStagingDirectory)
    artifact: drop

Step 5: Set Up Release Pipeline for Deployment

Create a release pipeline that deploys the build artifacts to Azure App Service:

  • Link the build artifact to the release pipeline.
  • Add a task to deploy to Azure App Service:
- task: AzureWebApp@1
  inputs:
    azureSubscription: 'Azure Service Connection'
    appName: 'Your-App-Service-Name'
    package: '$(System.DefaultWorkingDirectory)/drop/**/*.zip'
  displayName: 'Deploy to Azure App Service'

Step 6: Configure Continuous Deployment

Enable continuous deployment by linking the build pipeline to the release pipeline. Set triggers to automatically deploy after successful builds.

Step 7: Test the Deployment

Access your Azure App Service URL to verify that your React application is live and functioning correctly. Make changes to your code, push updates, and observe automatic deployments.

Conclusion

Setting up a React CI/CD pipeline with Azure DevOps and Azure App Service enhances your development workflow, reduces manual effort, and ensures consistent deployments. Regularly monitor your pipelines and update configurations as needed to maintain a smooth deployment process.