Try to update your dependencies with Renovate or Dependabot

#frontend #dependencies #dependabot #renovate

Keeping dependencies up-to-date is an important part of healthy projects, but often overlooked in Frontend (due to a lower security risk?) compared to backend or infrastructure.

Having the latest versions of libraries gives you and your teammates

Security confidence
Performance optimizations
Bugfixes
Access to latest features & new APIs

Often though, its importance is overlooked, which may lead up to critical level problems, when the project cannot work in the required environment (new browsers, or new requirements from app stores in case of mobile application).

Dependency update strategy though may vary according to the size of your team, kind of the product you're working on, etc. In some larger companies, there can be also special departments and private repositories for dependencies.

Working in a middle-sized team of developers (and non-health/wealth risk projects) we have tried 2 approaches for the updates.

Per library, live updates

First what comes to mind is Dependabot, now a "native" solution from Github. Dependabot will open PRs once a new version of the library is in.

How to enable: visit app.dependabot.com and select repositories you want to add.

Pricing: free of charge.

Once enabled, Dependabot will start to open PRs for new versions.

Dependabot will open PRs with the following contents

Batch update, once a month

Soon we've realized live updates per library are too verbose.
In the case of Dependabot there was no chance to set up PRs to be open only for major updates, therefore another attempt with Renovate:

How to enable: visit renovatebot.com and select repositories you want to add.
Pricing: free of charge.

Here's renovate.json configuration we settled:

{
  "extends": [
    "config:base",
    "group:all",
    // Regular updates
    "schedule:monthly"
  ],
  // Random assignee of PR
  "assigneesFromCodeOwners": true,
  "assigneesSampleSize": 1,
  "separateMinorPatch": true,
  "packageRules": [
    {
      // Only major and minor updates
      "updateTypes": ["patch"],
      "enabled": false
    }
  ],
  // Encrypted NPM token for private packages
  "encrypted": {
    "npmToken": "w/0FYXCXO1aYkUeivEFbB7yG/CPM4xC2ksGVLLua0rNMYyEF8bxlrYqMtJqriuG53oecATlrSzgh06/U3sYkA2ZNgHabyoinZWc+fI0rchCCgSH0EXIeRifZH+nRNY69e5EleMOT0wNrkYlSuWN0U0uOU53ZZB+bojKPEpWhULZTOC6nXsN5WOrYdP0T1Tw=="
  }
}