Set up CI/CD With Azure and GitHub Under 10 Minutes

Learn how to speed up your project workflow in minutes.

In this guide, I will run through the steps to help you set up a project workflow with Azure and Github using a React App. Before we start, let’s go over the basics and why we are doing this.

What is CI/CD?

Continuous integration (CI) focuses on building and testing the new code changes.

Continuous delivery/deployment (CD) focuses on getting new changes ready for deployment in production.

Diagram by Red Hat

Benefits of CI/CD

CI/CD can help teams speed up the deployment process, allowing developers to make small code changes to minimize bugs in production.

(Optional) Step 0: Create a React App

If you already have an app ready, go to step 1.

npx create-react-app <project-name>

Step 1: Setup CI/CD pipeline

If you are new to Azure, check out Microsoft's New User Guide; it explains the key concepts in Azure Pipeline.

Create an azure-pipeline.yml file in your project root directory. This file lists out the steps to build an artifact.

trigger:
 - master  
pool:
   vmImage: 'ubuntu-latest'
steps: 
  - task: NodeTool@0
    inputs:
     versionSpec: '10.x'
    displayName: 'Install Node.js'
  - script: |
     npm install
     npm run build
    displayName: 'npm install and build'
  - task: CopyFiles@2
    inputs:
     Contents: 'build/**' # Pull the build directory (React)
     TargetFolder: '$(Build.ArtifactStagingDirectory)'
  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: $(Build.ArtifactStagingDirectory) 
      ArtifactName: 'www' # output artifact named www

Push up the azure-pipeline.yml file to GitHub and continue.

Step 2: Setup project

Go to portal.azure.com and then go to Azure DevOps organizations.

Azure Portal

If you are new to Azure, you need to set up a new organization before setting up a project. Click on the ‘Create new organization’ button on the top right corner.

Create a new organization page

Once you created a new organization, select a ‘New Project’ and fill out the project details. Then you should see the project homepage.

Project Homepage

Go to ‘Pipelines’ and select ‘Create Pipeline.’ First, we need to connect the codebase, so select ‘GitHub.’

Once you select GitHub, you should be directed to a GitHub page for authentication and approval. Make sure you grant Azure access to the correct repo.

GitHub permissions page

Next, we need to configure the CI/CD pipeline. Select ‘Existing Azure Pipelines YAML File.’

Use the azure-pipeline.yml file.

Then, run your pipeline to create an artifact and go to jobs to see a realtime build.

Pipeline Jobs

Step 3: Set up App Service

Navigate back to the portal and go to App Services to set up the project URL.

Click on ‘Add’ and fill in the project details. Here is a basic web app set up.

If you don't have a resource group, go to the search bar and lookup ‘Resource Group’ and create a basic group like the screenshot below.

New resource group

The same goes for Windows Plan, lookup ‘App Service Plan,’ and create a plan.

Create an app service plan

Step 4: Create a release pipeline

Now go back to the project homepage and select ‘Releases’ under the pipeline tab.

New release template

Apply ‘Azure App Service deployment’ and then select ‘Add an artifact.’

Now we need to add a deployment trigger. In this guide, the trigger is set on the master branch. So whenever new code gets pushed to master, a new build will start. Click on the lightning bolt next to the article to enable the trigger.

Pipeline trigger page

The pipeline should look like this.

Release page

Go the ‘Tasks’ tab to select the correct subscription and app service name.

Select ‘Deploy Azure App Service’ and go to ‘Package or folder.’ Replace the original path with the following.

$(System.DefaultWorkingDirectory)/<sourcec-alias>/www/build

For example, it should look like this.

Step 5: Test CI/CD

To test your CI/CD pipeline, make some changes to the app and push up the code. Once you do, go to the repo on GitHub, you should see a yellow dot next to the commit hash.

Once the build is complete, it should trigger the release pipeline. Go to ‘Releases,’ and you should see the release progress in realtime.

To view the website, go to <web-app-name>.azurewebsites.net

The web-app-name is the name from the create web app page.

References

1. Azure Pipeline Docs
2. Building and Deploying your Code with Azure Pipelines by Microsoft Visual Studio