React deploy and test with Azure DevOps

The focus of this tutorial is to present how to deploy and test a React application with Azure DevOps.

We will perform the build with CRA, apply unit testing with Jest and React Testing Library, and end-to-end testing with cypress, using Azure DevOps to control the pipeline.

Photo by Edvin Richardson from Pexels

Setting Azure Web App

To start we need to create a free account in the Azure environment to perform our tests, Azure offers a free basic service plan for a period of 12 months, so we can play for free.

In the Azure environment click on “App Service” in this page you can see all your services already created and create new services.

Azure Console Dashboard

Before click in “Create” you will see a screen like a picture behind, select your Subscription and Resource group, give the name for your app that will be your public URL to test it later, in Runtime stack, select “NODE 12 LTS”, and Operation System “Linux”. There is a small difference between Linux and Windows, and we will see it later.

Create Web App Page

When you finish the configuration will take five minutes or more to Azure create your web app

Now that your web app is created you click on your web app and in the “Configuration” link, now in the “General Settings” tab, you will see the field “Startup command”, paste this command:

pm2 serve /home/site/wwwroot --no-daemon --spa

Web App Settings page

This will allow your Web App with Linux running a React always redirect to your index file, so your React routes will work properly, but if you choose a “Windows” Operation System, this steps is not necessary, for this kind of configuration you will need to create a Web.config file in your /public folder and paste this code:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Chapter-Redirect" stopProcessing="true">
                    <match url="chapter/*" />
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Run your unit tests

If you try to run the npm run testcommand during your application’s CI/CD process, our deploy process will fail, as the process will not be completed and will not proceed to the next step.

For that not to happen we need to add the variable wathcAll=falsewhen running the tests, that we will create a new script in our package.json ci:unit: npm run test --watchAll=false and will be something like this

“scripts”: {
 “start”: “react-scripts start”,
 “build”: “react-scripts build”,
 “test”: “react-scripts test”,
 “ci:unit”: “npm run test -- --watchAll=false”,
}

End-to-end Test

We will use cypress to perform the integrated test of the application, install the package npm install cypress --save-devor yarn add cypress --dev, to start cypress locally add the command “cypress:open”: “cypress open” to the package .json

But to perform the tests with cypress during our CI/CD process we need to run the application and cypress on the same terminal and for that, we will use the “start-server-and-test” package, install it npm install start-server-and-test --save-dev.

After installing the package in your package.json add the script ci:cypress: start-server-and-test start http://localhost:3000 cypress:run

Now your package.json script session should look like this:

“scripts”: {
 “start”: “react-scripts start”,
 “build”: “react-scripts build”,
 “test”: “react-scripts test”,
 “ci:unit”: “npm run test — — watchAll=false”,
 “ci:cypress”: “start-server-and-test start http://localhost:3000 cypress:run”
}

To carry out the tests we used the Mirage JS for mocking the API requests, its configuration and use are very simple, besides allowing the front-end development even if the API is not available. To know more about MirageJS you can see the documentation with more details

For that, let’s install Mirage npm install miragejs --save-dev or yarn add miragejs --dev now we will create a server.ts file for all our API endpoints.

import { Server } from "miragejs";
export const makeServer = () => {
  return new Server({
    routes() {
      this.namespace = "api-base/";
      this.get("users", (schema, request) => ({ data: "data" }));
      this.get("user/:id", (schema, request) => ({ data: "data" }));
      this.post("user/:id", () => ({ data: "data" }));
      this.put("user/:id", (schema, request) => ({ data: "data" }));
    },
  });
};

Now we can import our server file in App.tsx, in this specific case we will start our mocking API during the development and testing process.

if ([“test”, “development”].indexOf(process.env.NODE_ENV) > -1) {
  makeServer();
}

Configuring pipeline

After we’ve set up the necessary steps in our application, let’s create our azure-pipelines.yml that will run our application’s test, deploy and publish tasks.

First let’s set the trigger for our pipeline, which in this case will be our master branch.

trigger:
  - master

After that, we will configure our work which will be where we will have all our steps configured.

jobs:
  - job: Job_1
    displayName: Agent job 1
    pool:
      vmImage: vs2017-win2016

Now we will make the checkout of our repository in our pipeline, we start our steps, the first one will be to install the node version we need for our application. To learn more about the available tasks check Azure DevOps documentation

jobs:
  - job: Job_1
    displayName: Agent job 1
    pool:
      vmImage: vs2017-win2016
    steps:
      - checkout: self
      - task: NodeTool@0
        displayName: Use Node version
        inputs:
          versionSpec: 12.x

Then we will install our project’s dependencies.

trigger:
  - master
jobs:
  - job: Job_1
    displayName: Agent job 1
    pool:
      vmImage: vs2017-win2016
    steps:
      - checkout: self
      - task: NodeTool@0
        displayName: Use Node version
        inputs:
          versionSpec: 12.x
      - task: Npm@0
        displayName: Install application dependencies

Later we will continue with the testing phase, for that we will execute the commands previously configured in our package.json, if any of the test steps fail, the next steps in the pipeline will not be executed.

jobs:
  - job: Job_1
    displayName: Agent job 1
    pool:
      vmImage: vs2017-win2016
    steps:
      - checkout: self
      - task: NodeTool@0
        displayName: Use Node version
        inputs:
          versionSpec: 12.x
      - task: Npm@0
        displayName: Install application dependencies
        inputs:
          arguments: --force
      - task: Npm@1
        displayName: npm run test
        inputs:
          command: custom
          customCommand: run ci:unit
      - task: Npm@1
        displayName: npm run cypress
        inputs:
          command: custom
          customCommand: run ci:cypress

The next steps will be to build the application and publish it in the azure environment, and our final YAML must look something like this:

trigger:
  - master
jobs:
  - job: Job_1
    displayName: Agent job 1
    pool:
      vmImage: vs2017-win2016
    steps:
      - checkout: self
      - task: NodeTool@0
        displayName: Use Node version
        inputs:
          versionSpec: 12.x
      - task: npmAuthenticate@0
        inputs:
          workingFile: .npmrc
      - task: Npm@0
        displayName: Install application dependencies
        inputs:
          arguments: --force
      - task: Npm@1
        displayName: npm run test
        inputs:
          command: custom
          customCommand: run ci:unit
      - task: Npm@1
        displayName: npm run cypress
        inputs:
          command: custom
          customCommand: run ci:cypress
      - task: Npm@1
        displayName: npm build
        inputs:
          command: custom
          verbose: false
          customCommand: run build
      - task: AzureRmWebAppDeployment@4
        displayName: 'Azure App Service Deploy'
        inputs:
          ConnectedServiceName: <YOUR_CONNECTION>
          WebAppKind: webAppLinux
          WebAppName: <YOUR_APP_ID>
          Package: $(System.DefaultWorkingDirectory)/build
          InlineScript: >2
      - task: ArchiveFiles@1
        displayName: Archive files
        inputs:
          archiveType: zip
      - task: PublishBuildArtifacts@1
        displayName: "Publish Artifact: drop"

In order for the Azure DevOps environment to be able to publish the files in the previously created resource, it is necessary to create a connection service between Azure DevOps and the service environment. Let's do it, first click in “Project settings” then in “Service connections”.

You will see the Service Connections available to your Azure DevOps, and create new connections. Click on the “New Service Connection” button, then select “Azure Classic” and click on the “Next” button.

Now you have to fill all your required fields on the screen, the “Service connection name” will be the same name you will replace in ConnectedServiceName in your YAML file, in order to connect your pipeline with your Web App

After creating the .yml file, we will upload our file to our repository, done that we must create our pipeline. Click in your “Pipelines” tab in Azure DevOps, you will see all your Pipelines, click on the “New Pipeline” button.

Select where is placed your code, in our case “Azure Repos Git”

Select the repository to which our pipeline will be applied

Since we have already created our pipeline, in this step, we must select “Existing Azure Pipelines YAML file”, then we have to place where is located your azure-pipeline.yml file

Everything is ready, now you can Run/Save or just Run your pipeline, remember every time you publish some change in your target branch the whole process will be triggered automatically.

You can even disable this automatic behavior, and fire manually your pipelines, to do that select your “Pipelines” tab, and click on the “More Options” icon than in the “Edit” link, will you see the pipeline Edit page.

At the top of the page click on the “More actions” icon then in the “Settings” link, you will see the settings screen, where you must select the “Disabled” option and click on the “Save” button.

Now when you wish to trigger your pipeline, select the “Pipeline” tab and select your pipeline and click the “Run Pipeline” button. That's all I hope it helps you in some way.

Also, take a look at our Linkedin and website — https://shapedigital.com

Shape | LinkedIn

Thanks for reading