A crazy-simple way to bulk-update NPM dependencies with GitHub's Dependabot

This is the simplest way I've found to keep your NPM dependencies up-to-date. This will update all dependencies and devDependencies via automatically-generated pull requests AND you don't have to push files or leave the GitHub.com website. This works for monorepos too!

tl;dr

1. Go to your repo -> Insights -> Dependency graph -> Dependabot -> Enable Dependabot
2. Create a config file and add a group to it
3. Copy your GitHub Action secrets to Dependabot secrets

Prerequisites

• Your repo's dependencies managed by NPM
• Write permissions to your repository
• No fear of beta-features

What is this?

I was stumped on how to enable Dependabot in Github after reading lots of docs and blogs about adding Dependabot to a repo. Each article detailed how to create the dependabot.yml file and the breakdown of it's data structure, but not the basics of turning it on. Then, I stumbled across the Enable Dependabot button. 🤦 So I figured I'd help someone else save some time.

The ability to create a single pull request containing all dependency updates is made possible by GitHub's newly implemented grouped version updates, which is a beta feature as of this writing. Normally Dependabot creates one PR for each dependency being updated.

Expected outcome:

• Once-daily, Dependabot will check your repo's dependencies to see if newer versions exist
• If new versions exist, Dependabot will create a pull request, updating every dependency which has a new version
• The pull request will change relevant package.json and package-lock.json files
• If you use GitHub actions, Dependabot's PR will run the same checks as other PRs

Note: Dependabot does a whole lot of other stuff and these instructions are specifically for the task of having Dependabot create one pull request whenever it finds one or more dependencies in your NPM repo which have an newer version.

Step 1: Enable Dependabot

Navigate to your repository on GitHub.com and then...

1. Trigger "Insights" link in the repo navigation
2. Trigger "Dependency graph" in the page menu
3. Trigger "Dependabot" in the Dependency graph page's tabs
4. Trigger the "Enable Dependabot" button

Step 2: Create dependabot.yml config file

The next page kinda looks the same as the last one! But now the "Enable Dependabot" button is replaced with a "Create config file" button

1. Trigger the "Create config file" button

Step 3: Edit the dependabot.yml file

Triggering "Create config file" brings you to the GitHub file editing interface. You will be adding the file at <repo-root>/.github/dependabot.yml. Setting up bulk management of your NPM dependencies requires three changes to the default dependabot.yml file, changing the package-ecosystem, the interval, and adding the group

Default content of the dependabot.yml file

# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
  - package-ecosystem: "" # See documentation for possible values
    directory: "/" # Location of package manifests
    schedule:
      interval: "weekly"

Step 3.A Change the ecosystem to npm

updates:
  - package-ecosystem: "npm"

Step 3.B Change the interval to "daily"

    schedule:
      interval: "daily"

Step 3.C Add the groups content

The groups configuration documentation is here. The StoryDocker repo has examples of a groups-enabled dependabot.yml file and a Dependabot-created PR

• add groups right after the interval section from above
• the group name is dev-dependencies, but the naming is flexible
• the group name is used to create the PR title ("⬆️ Bump the dev-dependencies group with 32 updates" and the PR's branch from the Dependabot fork (dependabot/npm_and_yarn/dev-dependencies-b6aa4603c8)
• this example uses a wildcard pattern so it will update all dependencies, but it's possible to narrow it to a subset of your deps

    schedule:
      interval: "daily"
    # Create a group of dependencies to be updated together
    # in one pull request
    groups:
       # Specify a name for the group, which will be used 
       # in pull request titles and branch names
       dev-dependencies:
        # Define patterns to include dependencies in the group 
        patterns: 
          # Wildcard matches all dependencies 
          # across the package ecosystem.
          - "*"

The final file's contents

# (adjust comment to your liking)

version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "daily"
    groups:
      dev-dependencies:
        patterns: 
          - "*"

Step 4 - Copypasta your secrets to allow actions

Fun fact: Dependabot does not have access to any secrets you created for GitHub Actions.

The StoryDocker repo has a GitHub action which releases a PR-based deployment to Chromatic and that action requires a secret named CHROMATIC_PROJECT_TOKEN. This token is already configured at Settings -> Secrets and Variables -> Actions. To make this action work when Dependabot adds a PR from a fork of the repo, you need to have a duplicate token in the secrets for Dependabot.

1. Trigger "Settings" tab in repo navigation
2. Trigger "Secrets and variables" in the Settings page nav
3. Trigger "Dependabot" nav item to get the Dependabot's secrets page
4. Trigger "New repository secret" button to add a secret
5. Add your secret there, using the same secret name you used for the Actions secret

Step 5 - Read and merge PRs

There are ways to automate merging the PRs created by Dependabot, but I have trust issues, so I prefer to review the PRs and merge them myself.

Step 6 - PROFIT

Dependency management just got a whole lot easier. Go outside and touch grass!