React/Redux application with Azure DevOps: Part 3 CI/CD pipeline
Tags: azuredevops, react, redux, unittest
Published: 2020-02-25 06:42:52

---
title: React/Redux application with Azure DevOps: Part 3 CI/CD pipeline
published: true
description: React/Redux application with Azure DevOps
tags: AzureDevOps,React,Redux,UnitTest
---

In the [previous post](https://dev.to/kenakamu/react-redux-application-with-azure-devops-part-2-add-redux-to-application-5doc), I created voting app with React and Redux. It's time to craft pipelines for CI/CD. In this article, I create simple CI/CD pipeline first.

# Azure DevOps

It's Microsoft Azure solution which provides complete feature set for DevOps.

- Board for sprint, task, etc.
- Repository
- Build and Release Pipelines
- Testing
- etc.

See [Azure DevOps](https://azure.microsoft.com/en-us/services/devops/) for more datail.

For CI/CD pipeline, Azure DevOps supports both YAML and GUI authoring experience. Each has pros and cons but I use YAML in this article as it's relatively new feature and way to go for my understanding. 

[Create your first pipeline](https://docs.microsoft.com/en-us/azure/devops/pipelines/create-first-pipeline?view=azure-devops&tabs=java%2Cyaml%2Cbrowser%2Ctfs-2018-2) explains in both experiences.

Refer to [YAML Scheme](https://docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema?view=azure-devops&tabs=schema) for more detail about YAML definition.

# Create Web App service

To host the application, I use Azure Web Service. You can find detail information  at [Configure a Linux Node.js app for Azure App Service](https://docs.microsoft.com/en-us/azure/app-service/containers/configure-language-nodejs)

This time, I just use Azure Portal add new resource wizard to create Linux/Node.js Web App service.

# Check in existing code

To start using Azure DevOps, go to [DevOps portal](https://dev.azure.com) and create new project. Then go to Repos to get the git address where you can check-in/push your code. After you create the project, let's check-in the code.

1\. Update .gitignore to ignore .vscode folder.

2\. Add remote server. You can get the git address by visiting Repos section in your Azure DevOps project.

```shell
git remote add origin <your git address>
```
3\. commit and push.

```shell
git add .
git commit -m "any comment"
git push -u origin master
```

4\. You should see all the code checked-in to master branch.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h8saxac3z3ofhcj203yr.jpg)

# Create build and deploy pipeline

Let's add first build pipeline. This pipeline covers both CI and CD.

1\. Select Pipelines and click "Create Pipeline".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/exxi4c2qzf7ll2vcn9lx.jpg)

2\. Select "Azure Repos Git" and select the repository. (Or you can pick up any repo where you have your own react code.)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgezwmdzec8god0gbpi0.jpg)

3\. In "Configure your pipeline" page, select "Node.js React Web App to Linux on Azure".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eeikecwjj8kibb0avkab.jpg)

4\. Select your Azure subscription and web app service, then click "Validate and configure", which creates yaml file for you.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lr16tlpf3plbwivzh3r4.jpg)

5\. Click "Save and run" once you see the yaml detail. It triggers the pipeline and you can see the progress via GUI.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66v3d9ym02g59urgj6xa.jpg)

### See the application

Once build and deploy has been completed, go to the URL of the Web App to see if the application works as expected.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1i1997e0az9s6dnnoaew.jpg)

# Update build stage

The pipeline I just created doesn't have good build stage as it just zip the source code and pass to deploy stage. But I need to run following tasks before deploy stage.

- Build the application
- Run test

So let's update the yaml.

1\. Go back to pipelines and edit the existing one.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vrtvsq4ghzjnqm9dsez9.jpg)

2\. Add "Node.js/npm Tool Installer" from Tasks pane after the "ArchiveFiles@2" tasks.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85xb4tiiwm6vf30m40ka.jpg)

3\. Next, add script task and add command.

```yaml
- script: |
    npm install
    npm run build
    CI=true npm test
  displayName: 'npm install, build and test'
```

4\. Click "Save" which triggers the pipeline automatically. I can see the newly added task run successfully.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j1jxer7o382vs1nysgbe.jpg)

5\. But the Tests result won't be displayed in the summary page.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jv8hb901b75gjh7u84f0.jpg)

Azure DevOps didn't pick up the test results, so I need to explicitly publish the test report.

# Publish Report

According to [Azure DevOps: Review test results](https://docs.microsoft.com/en-us/azure/devops/pipelines/test/review-continuous-test-results-after-build?view=azure-devops), Mocha, Jest and Jasmine are the supported test runner framework which automatically surface the test result.

React-Script supposes to use Jest underneath, but it looks like I have to manually push the report. [Run unit tests](https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/javascript?view=azure-devops#run-unit-tests) page gives me the list of Test runner and reporters combination. I use [jest-junit](https://github.com/jest-community/jest-junit).

[Create React App: Configuration page](https://create-react-app.dev/docs/running-tests/#configuration) indicates that I cannot specify reporters by using package.json, so I use argument to specify it.

1\. Back to VSCode and install jest-junit.

```shell
npm install jest-junit
```

2\. Run npm test with parameter. Don't forget add **--** between npm run and parameters.

```shell
($env:CI = "true") -and (npm test -- --reporters=jest-junit --reporters=default)
```

3\. Once the test is ran, junit.xml file is generated at the root. As we don't need to check in this file, add it to .gitignore
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/583i57tyomi2w9uslv2w.jpg)

4\. Push the change.

```shell
git pull
git commit -am "add jest-junit"
git push
```

5\. Go back to Azure DevOps pipeline, select the pipeline and edit. Pipeline is running because it was triggered by push. I canceled it for now.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2jinf932rrxloj8agu2y.jpg)

6\. Change test script.

```yaml
- script: |
    npm install
    npm run build
    CI=true npm test -- --reporters=jest-junit --reporters=default
  displayName: 'npm install, build and test'
```

7\. Select "Show assistant" on the right if you don't see the Tasks pain. Search for "publish test results".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4mxwv5l06hvgau86yig8.jpg)

8\. Change the file name as "junit.xml" and click "Add" which add following snippet. Make sure to put this task below the test task.

```yaml
- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: 'junit.xml'
    failTaskOnFailedTests: true
```

9\. Save the change which triggers the build. I can see the test result in the summary page now.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fghzw9fo55rluvg84or9.jpg)

10\. I can see the detail in test tab.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uqfmbhyntzgopdicecvm.jpg)

# Summary

In this article, I created CI/CD pipeline with unit test. In the next article, I will enhance the pipeline to add several features including approval process.

[Next article](https://dev.to/kenakamu/react-redux-application-with-azure-devops-part-4-enhance-the-pipeline-30ho)