What is danger.js anyway?
DangerJS runs during your CI process, and helps your team to automate certain manual code review tasks such as
- Is there a
new libraryormodule installed? - Does this
PR changesare added tochangelog file? - Is
.lockfilekept up to date? - Will this change
increase my bundle size?
Example from ReactJS PR:
Let's integrate Danger.js in Github and Travis CI/CD services. This is a two step process.
Step 1:
Now let's add dangerjs to your devDependencies in package.json file.
yarn add danger -D
Step 2:
Then create dangerfile.js file on root of your project.
Example:
// Import the feedback functions
import { message, warn, fail, markdown } from 'danger';
// Add a message to the table
message('You have added 2 more modules to the app');
// Adds a warning to the table
warn('You have not included a CHANGELOG entry.');
// Declares a blocking
fail(`ESLint has failed with ${fails} fails.`);
// Show markdown under the table:
markdown('## New module Danger' + dangerYarnInfo);
Step 3 (Optional):
This is an optional step, create an github account for your bot.
Step 4:
Create a New personal access token in github for read & write access for your bot.
Github Settings Page screenshot:
Step 5 (Final Step):
Finally, lets Hook danger.js in Travis CI
- Copy the generated personal token from your github or your bot account you created.
- Go to your project settings in Travis CI.
- Create a new environment variable called DANGER_GITHUB_API_TOKEN and the value is your personal token.
Travis Settings Page screenshot:
After this step, you should be seeing bot account adding comments to your every PR as per your dangerfile.js config.
Example from QR Code Scanner PR:
Test it locally:
You can test your changes locally using following terminal command.
yarn danger pr <your-pr-link>
Final note:
By adding danger.js will help us save time in OSS project by automating mundane tasks. Thank you for reading my post till the end. If you like my post share it 😇.