Recently I have been playing around with a React App which uses Typescript, with an intent to learn and stay updated on the front end world. I am using GitHub to host this repository and I wanted to ensure that every time a pull request is created on this repository
- The project is buildable — Meaning no errors.
- All lint rules that I have set pass.
- All tests pass
While trying to check GitHub apps for this, I found many related apps, but this particular app caught my eye — “Azure Pipeline”. Being a Microsoft fanboy, I decided to try it out 😉
Once you install this app on your GitHub repository, you will be redirected to Azure DevOps website, where you need to create an account and then setup your organization/project-name.
Once logged in, you need to setup build pipeline for your project. Its a fairly straight forward process —
- Select “GitHub” option.
2. Search and select the repository for which you want to set this up.
3. Select the type of project, Azure DevOps provides an extensive list of different type of applications. Here we select “Node.js with React” option.
Next, it should generate a “azure-pipelines.yml” with a bunch of configuration. On saving this file, it will create a commit in the same repository and save this file at the root of the application.
There are 2 part of configuration in my setup.
- The commands below will make sure all dependencies are downloaded correctly and project is building without errors. Here you could optionally run your tests using npm run test.
Npm install & build.- script: |
npm run build
displayName: ‘npm install and build’
2. Running Tslint and making sure all rules pass. For this first make sure you install tslint in your project as a dev dependency, and then run tslint command using this script –
- task: TSLINT step
npm install tslint typescript -g
tslint — project ./tsconfig.json
And that’s it! Now whenever you create/update a pull request, you will get a status from Azure Pipeline for the build/lint/tests as pending/success/error and a link to get to the build log for more details.
Above is a sample PR, where I added some errors in code so that it builds fails with error. Azure Pipeline has reported an error status on the PR, you can also step it up in a way that this status must always pass before the branch can be merged into master. Below is how to do it…
The only downside I have so far is that unlike some of the other apps that comment inline in the pull request, here I have to go to the build log to see the details of why the linting failed.
Here is the sample build log from one of the PR where tslint failed with errors.