In the previous post, 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.
It's Microsoft Azure solution which provides complete feature set for DevOps.
- Board for sprint, task, etc.
- Build and Release Pipelines
See Azure 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 explains in both experiences.
Refer to YAML Scheme for more detail about YAML definition.
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
This time, I just use Azure Portal add new resource wizard to create Linux/Node.js Web App service.
To start using Azure DevOps, go to DevOps portal 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.
git remote add origin <your git address>
3. commit and push.
git add . git commit -m "any comment" git push -u origin master
Let's add first build pipeline. This pipeline covers both CI and CD.
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.
3. Next, add script task and add command.
- script: | npm install npm run build CI=true npm test displayName: 'npm install, build and test'
Azure DevOps didn't pick up the test results, so I need to explicitly publish the test report.
According to Azure DevOps: Review test results, Mocha, Jest and Jasmine are the supported test runner framework which automatically surface the test result.
Create React App: Configuration page 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.
npm install jest-junit
2. Run npm test with parameter. Don't forget add -- between npm run and parameters.
($env:CI = "true") -and (npm test -- --reporters=jest-junit --reporters=default)
4. Push the change.
git pull git commit -am "add jest-junit" git push
6. Change test script.
- script: | npm install npm run build CI=true npm test -- --reporters=jest-junit --reporters=default displayName: 'npm install, build and test'
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.
- task: PublishTestResults@2 inputs: testResultsFormat: 'JUnit' testResultsFiles: 'junit.xml' failTaskOnFailedTests: true
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.