Build and Deploy Simple React Web App using Azure DevOps.

Adeniye Kehinde Afusat

5 min readOct 16, 2021

Implementing CI/CD in your Web App

Prerequisites

Git Bash
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.

Open GIT bash and make a folder using below command

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

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

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

Once done, use Ctrl+C to stop the server from the terminal,then open in Visual Studio Code.

Step 2: Configure Azure App Service.

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

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

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>

— git push — set-upstream origin master

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.
Use Classic editor -to create a yaml file from scratch using empty job.

Using empty job to create tasks for build pipeline, with Agent job this allows tasks run synchronously by searching for the below commands

— npm install( to install the npm package)

— npm run build (To run the build command)

— Publish Build artifacts (To publish the artifact from the build step 2 above)

— The last step would be to click save and queue to run the list of commands.

This image shows that the tasks ran succesfully.

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.

— The build project is what will be pushed to azure

The build pipeline would trigger, then the release pipeline would also trigger automatically. The release pipeline has one job which is to push to azure and that is the sole purpose of continuous integration as the CI is already enabled in the previous step.

Select empty job to create a template to release to Azure

Step 6: Adding another task on the empty job to deploy to App service

The deploy stage depends on the build stage, only a successful build will trigger a deployment. The new added task — task: Simplereactappptells the pipeline to use the artifact from the build stage, deploy it to our web app created.

Now that we understand the contents of the file, click on “Save ” in the pipelines page, enter a commit message, click on “save and run” which will immediately trigger the pipeline

Next is to make some changes to the source code and git push using the git commands.

Once the task is done, it will trigger the release pipeline and then the release pipeline pushes to azure. Any changes on the source code get committed and pushed using git commands.

Now we have a successful deployment, we can navigate on to the Web App URL https://<your-web-app-name.azurewebsites.net which should be running.

Resources Clean Up

To prevent incurring charges on the Azure resources created in this tutorial, you can delete the resource groop hosting the web app which will delete all resources in it. Resource deletion

Conclusion

Thank you for reading and following through. In this article we have deployed a React web App to an Azure App services also integrating an Azure CI/CD pipeline that automatically builds and deploys the code. You can add other functionalities in your pipeline, such as test scripts, security checks, multi stages deployment etc.

Feel free to lookup my Github and connect with me on Linkedin and Twitter.