How I use Dependabot to keep my React projects updated

Image By Copilot

Hey there, fellow React enthusiasts! Today, I want to dive into a tool that has been an absolute game-changer for me in maintaining my React projects: Dependabot. Buckle up, because I’m about to take you on a ride through my experiences and insights on how Dependabot can revolutionize your workflow.

Step 1: Create a file dependabot.yml in the .github folder present at the root of your project

Image by the Author

Step 2: Add the contents of dependabot.yml file. More information can be found here.

version: 2
updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
      interval: weekly
    open-pull-requests-limit: 5
    ignore:
      - dependency-name: "@types/react"
        versions:
          - 17.0.0
          - 17.0.1
          - 17.0.2
          - 17.0.3
      - dependency-name: "@types/react-test-renderer"
        versions:
          - 17.0.0
          - 17.0.1
      - dependency-name: xlsx
        versions: ["*"]
      - dependency-name: "react-router-dom"
        versions: ["*"]
  - package-ecosystem: github-actions
    directory: "/"
    schedule:
      interval: daily
      time: "21:00"
    open-pull-requests-limit: 10

I’ve mentioned some dependencies in the ignore list as you I don’t want to update these dependencies again and again. However, you may add more or delete based on the project requirements.

I’ve set the maximum pull requests the Dependabot can open to 5 as I don’t prefer spending too much time on reviewing pr’s by Dependabot and also set the frequency to weekly.

Step 3: Validating pull requests created by Dependabot

You don’t want to accept all the pull requests generated by Dependabot as they may have some breaking changes. You can a add build validation file like the one I’ve added.

Create staging-pipeline.yml in .github > workflows > staging-pipeline.yml. Now let’s differentiate the build created by humans and bot.

Image by the Author

staging-pipeline.yml

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - develop
      - staging

  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
      - develop
      - feature/*
      - release/*

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed' && github.event.pull_request.user.login != 'dependabot[bot]')  
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - name: Install GitVersion
        uses: gittools/actions/gitversion/setup@v1.1.1
        with:
          versionSpec: '5.x'
      - uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
      
      - name: get-npm-version
        id: package-version
        uses: martinbeentjes/npm-get-version-action@main


      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: ""
          output_location: "build"
          production_branch: "main"
          environment: "develop"
        env:
          REACT_APP_VERSION: "${{ steps.package-version.outputs.current-version}}"
          

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.user.login != 'dependabot[bot]'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

  review_dependabot_pr:
    if: github.event_name == 'pull_request' && github.event.pull_request.user.login == 'dependabot[bot]'
    runs-on: ubuntu-latest
    name: Review Dependabot PR
    steps:
      - name: Install GitVersion
        uses: gittools/actions/gitversion/setup@v1.1.1
        with:
          versionSpec: '5.x'
      - uses: actions/checkout@v4
        with:
          submodules: true
          fetch-depth: 0
      - name: Setup node
        uses: actions/setup-node@v4
        with:
          node-version-file: '.nvmrc'
      - name: Run build
        run: |
          yarn install
          yarn build

This YAML script defines jobs for building and deploying the project, closing pull requests, and reviewing Dependabot pull requests.

You see here I’ve as used the following condition below review_dependabot_pr job .

github.event.pull_request.user.login == 'dependabot[bot]'

This condition ensures that the pull request is created by Dependabot and its job is to just check if the build succeeds after a package update by Dependabot.

After the successful run, you may view the pull request generated by Dependabot like this

You see some have failed the build process and that’s why they are not merged.

In essence, by following these steps, we ensure that our React projects stay updated and stable, thanks to the vigilant assistance of Dependabot. Happy coding, everyone! 🚀