Tag Archives: github

Working with danger JS and integrating it with GitHub

What is danger JS ?

Danger runs during your CI process, and gives teams the chance to automate common code review chores. It’s an automation checker against any opened pull requests.

Install danger JS

Navigate to the root of your folder and execute:

$ yarn add danger --dev; yarn danger init

yarn danger init
yarn run v1.22.4
$ /Users/toninichev/Cloud/workspace/nodeJS/Examples/Sparkjs/node_modules/.bin/danger init
Welcome to Danger Init - this will take you through setting up Danger for this project.
There are four main steps we need to do:

 - [ ] Create a Dangerfile and add a few simple rules.
 - [ ] Create a GitHub account for Danger to use, for messaging.
 - [ ] Set up an access token for Danger.
 - [ ] Set up Danger to run on your CI.

But before we start, we need one bit of information from you.
Is this is for an Open Source or private project?

[1] Open Source
[2] Private Repo


## Step 1: Creating a starter Dangerfile

I've set up an example Dangerfile for you in this folder.

> cat /Users/toninichev/Cloud/workspace/nodeJS/Examples/Sparkjs/dangerfile.js 

  import {danger, warn} from 'danger'
  // No PR is too small to include a description of why you made a change
  if (danger.github.pr.body.length < 10) {
    warn('Please include a description of your PR changes.');
  // Request changes to src also include changes to tests.
  const allFiles = danger.git.modified_files.concat(danger.git.created_files)
  const hasAppChanges = allFiles.some(p => includes(p, 'src/'))
  const hasTestChanges = allFiles.some(p => includes(p, '__tests__/'))
  if (hasAppChanges && !hasTestChanges) {
    warn('This PR does not include changes to tests, even though it affects app code.');

There's a collection of small, simple rules in here, but Danger is about being able to easily
iterate. The power comes from you having the ability to codify fixes for some of the problems
that come up in day to day programming. It can be difficult to try and see those from day 1.

If you'd like to investigate the file, and make some changes - I'll wait here,
press return when you're ready to move on...


## Step 2: Creating a GitHub account

In order to get the most out of Danger, I'd recommend giving it the ability to post in
the code-review comment section.


IMO, it's best to do this by using the private mode of your browser.
Create an account like: SparkjsBot and don't forget a cool robot avatar too.

Here are great resources for creative-commons images of robots:

 - https://www.flickr.com/search/?text=robot&license=2%2C3%2C4%2C5%2C6%2C9
 - https://www.google.com/search?q=robot&tbs=sur:fmc&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjgy8-f95jLAhWI7hoKHV_UD00QsAQIMQ&biw=1265&bih=1359

Sidenote:  Holding cmd ( ⌘ ) and double clicking a link will open it in your browser.

SparkjsBot does not need privileged access to your repo or org. This is because Danger will only
be writing comments, and you do not need special access for that.

Cool, please press return when you have your account ready (and you've verified the email...)


## Step 3: Configuring a GitHub Personal Access Token

Here's the link, you should open this in the private session where you just created the new GitHub account


For Open Source projects, I'd recommend giving the token the smallest scope possible.
This means only providing access to public_repo in the token.
This token limits Danger's abilities to just writing comments on OSS projects. We recommend
this because the token can quite easily be extracted from the environment via pull requests.

It is important that you do not store this token in your repository, as GitHub will
automatically revoke your token when pushed.

?, please press return when you have your token set up...


## Add to CI

You need to expose a token called DANGER_GITHUB_API_TOKEN and the value is the GitHub Personal Access Token.
Depending on the CI system, this may need to be done on the machine (in the ~/.bashprofile) or in a web UI somewhere.
We have a guide for all supported CI systems on danger.systems:

## Useful info

- One of the best ways to test out new rules as you build them is via bundle exec danger pr.
- You can have Danger output a lot of info via the --verbose option.
- You can look at the following Dangerfiles to get some more ideas:

  * https://github.com/artsy/emission/blob/master/dangerfile.ts
  * https://github.com/facebook/react-native/blob/master/bots/dangerfile.js
  * https://github.com/apollographql/apollo-client/blob/master/config/dangerfile.ts
  * https://github.com/styleguidist/react-styleguidist/blob/master/dangerfile.js
  * https://github.com/storybooks/storybook/blob/master/dangerfile.js
  * https://github.com/ReactiveX/rxjs/blob/master/dangerfile.js


And you're good to go. Danger is a collaboration between Orta Therox, Gem 'Danger' Maslen,
and every who has sent PRs.

If you like Danger, let others know. If you want to know more, follow @orta and @DangerSystems on Twitter.
If you don't like something about Danger, help us improve the project - it's all done on volunteer time! xxx
Remember: it's nice to be nice.

✨  Done in 1701.50s.

At the end this will create danger.js file in the root of your project.

Setup Github token

Create new Github token and give it “repo” access. This should be enough to allow the Github bot that will use it to post messages on pull requests.

Make sure that you copied the token and save it safely OUTSIDE OF THE PROJECT’S FOLDER,  because you won’t be able to see the token again.
Also if you save it in the project’s folder, next time when you push the code Github will invalidate it cause this is considered a security breach.

Link to create new token: https://github.com/settings/tokens/new

Override the contents of the danger file

import { fail, warn, message, markdown, danger } from "danger"

fail("Testing failure message");
warn("Testing warning");
message("Normal message");
markdown("*Markdown* is also **supported**");

const { additions = 0, deletions = 0 } = danger.github.pr;
message(`:tada: The PR added ${additions} and removed ${deletions} lines.`);

const modifiedMD = danger.git.modified_files.join("\n");
message(`Changed Files in this PR: \n ${modifiedMD} \n`);

Create pull request and test danger JS locally

Before we could do this, we have to export environment variable DANGER_GITHUB_API_TOKEN with the value equal to the tocen that we created in the previous chapter.


And now, test it locally:

$ yarn danger pr https://github.com/ToniNichev/projects-sparkjs/pull/1 

Integrate it with GitHub

Github provides api that we could use to get information about commits and pull requests.

Example of getting all pull requests:


Before we are able to see messages in github we have to txport two more environment variables:

$ export DANGER_TEST_REPO='ToniNichev/projects-sparkjs'

Test danger JS. Execute:

$ DANGER_TEST_PR='4' yarn danger ci 

And if everything is correct you should see the messages in the pull request: