CI/CD for ReactJS app using Azure DevOps

In this article, we will be setting up CI/CD (continuous integration and continuous deployment) pipeline for a web app built with ReactJS. We will be using AzureDevOps for source control and pipeline and Microsoft Azure for hosting the application.

ReactJS + Docker + AzureDevOps + Microsoft Azure

We will first build a simple ReactJS app then containerize it using Docker. We will be using AzureDevOps repositories for source control and pipelines for continuous deployment to Azure. We will be using Azure Container Services to host docker images and Azure Web Apps for hosting the application.

CI/CD Architecture

If you have basic knowledge of ReactJS, Azure DevOps, Container Registry and Web app then you can jump to Setup Azure DevOps Pipeline.

Setting up React project with Azure DevOps

Create a new Azure DevOps project or use your existing project. Create a new repository. Clone that repository in your computer and navigate to the directory. Delete any exiting files that Azure Repository has created.

Use create-react-app cli to create a new project in the directory. Once that is done. Push your changes to the azure repository.

Dockerize the app

Add Dockerfile to root directory of your project. This file will build docker image that will have react app and nginx web server to serve react app. And push this file to repository.

Now, you have all the source code needed for the project.

Setup Azure Container Registery and a Web App for Containers

Go to Azure Portal and create Azure Container Registery which will be used to host your docker images. Create a new Azure Web App which will be used to host the image and run container. You should have two resources similar to ones shown below ready.

Azure Container Registry

Azure Web App for Container

Setup Azure DevOps Pipeline

Azure DevOps Pipeline is a tool to automate build and deployment process. FIrst we need to plan, what we want to achive here. We need to create a docker image when we checkin new code in repository. Then it should be pushed to Azure Container Registry and Deployed to the Web App we created in previous step. We will create it using UI assistant.

We will configure two stage deployment.

1. Build stage
   This task will build docker image using the Dockerfile from the repository and push that built image with a tag to Azure Container Registry that we created.
2. Deploy stage
   This task will initiate a deployment to Azure Web Apps using the docker image from Azure Container Registery with the same tag.

Let’s get started. Go to pipelines and click on New Pipeline.

Select Azure Repos Git

Select code repository

Select Docker template with Build and push an image to ACR

Select your Azure subscription where we have created Azure Container Registry and WebApp.

Select Dockerfile, container registry and image name. Click on validate and configure pipeline. It will navigate to yml file editor.

Add a new step for deployment. Select Azure App Service deploy step.

Here is the final azure-pipeline build configuration file.

Pipeline configuration to build docker image, push and deploy on web app

This pipeline will run each time we push code in the master branch. You can change the trigger as per your requirement.

Save and run the pipeline now. An image will be pushed to container registry.

and Web App will be deployed. We can see deployment history in Deployment Center.

Navigate to the url and we can see our react app served from a container hosted in Azure Web Apps.

React app running in Azure Web app for Containers

Wrapping up

Setting up CI/CD pipeline in Azure DevOps is very simple specially when you choose Azure for cloud infrastructure. Azure DevOps provides great visual pipeline assistant tool that can help build images, push to container registry and deploy to web apps very easy. We can build many great things leveraging Microsoft Azure eco-system.

Thanks for reading. Have a good day and happy coding. :)