DEV Community

loading...

Add danger.js to your OSS in 5 mins

gokulkrishh profile image Gokulakrishnan Kalaikovan Originally published at gokulkrishh.github.io on ・4 min read

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:



DangerJS in React

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

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

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



Code Kotis - QR Code Scanner

QR Code Scanner

Hot Tips:

You can test your changes locally using following terminal command.

yarn danger pr <your-pr-link>
Enter fullscreen mode Exit fullscreen mode
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 😇.

Discussion (0)

pic
Editor guide