Add danger.js to your OSS in 5 mins

What is danger.js anyway?

DangerJS runs during your CI process, and helps your team to automate certain manual code review tasks like:

• Is there a new library or module installed?
• Does this PR changes are added to changelog file?
• Is .lockfile kept up to date?
• Will this change increase my bundle size?
• So on and on.

Example:

React using danger.js

Integrating Danger.js in Github & Travis

Step 1: Add dangerjs to your devDependencies in package.json file.

yarn add danger -D

Step 2: Create dangerfile.js file in 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): Create an github account for your bot.

Step 4: Create a New personal access token in github for read & write access for your bot.

Example:

Github Settings Page

Step 5 (Final Step): Hooking 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.

Example:

Travis Settings Page

After this step, you should be seeing bot account adding comments to your every PR as per your dangerfile.js config.

Example: QR Code Scanner

QR Code Scanner

Hot Tips:

You can test your changes locally using following terminal command.

yarn danger pr <your-pr-link>

References:

1. ReactJS dangerfile.
2. Tutorials for other app such as node app, node libraries etc.
3. More tutorials on adding danger.js to other CI’s

Thank you for reading my post till the end. If you like my post share it 😇.