DEV Community

Cover image for Streamline Your Workflow: Setting Up Git Hooks with Husky to Simplify Version Updates
Dhairya Nadapara
Dhairya Nadapara

Posted on

Streamline Your Workflow: Setting Up Git Hooks with Husky to Simplify Version Updates


In the realm of software development, version management stands as a crucial pillar, ensuring seamless collaboration, accurate tracking of changes, and smooth deployment processes. However, manually updating version numbers can be cumbersome and prone to human error, leading to inconsistencies across projects. Enter Git hooks and Husky—a powerful duo that can automate version updates on commit, offering developers a streamlined solution with the added convenience of interactive prompts. In this article, we'll delve into the depths of Git hooks, explore the capabilities of Husky, and guide you through the process of setting up automated version updates with a touch of interactivity.

Understanding Semantic Versioning: Maintaining Consistency and Compatibility

Semantic Versioning, or SemVer, is a standardized versioning scheme used in software development to convey meaningful information about changes in a project. It consists of three numeric components: MAJOR, MINOR, and PATCH, separated by periods. These components represent:

  • MAJOR: Incremented for incompatible API changes.
  • MINOR: Incremented for backward-compatible feature additions.
  • PATCH: Incremented for backward-compatible bug fixes.

Additionally, SemVer includes pre-release versions and build metadata. Pre-release versions include identifiers such as alpha, beta, or rc, denoting a work in progress. Build metadata provides information about the build process or environment.

Understanding Git Hooks: A Foundation for Automation

Git hooks serve as versatile scripts triggered by specific Git events, such as commit, push, or merge. They provide developers with the ability to automate tasks before or after these events, thereby enhancing workflow efficiency and ensuring adherence to project standards.

Embracing Husky: Simplifying Git Hook Management

Husky emerges as a beacon of simplicity in the realm of Git hook management. With its intuitive interface and seamless integration, Husky empowers developers to effortlessly configure and execute hooks, making tedious manual setups a relic of the past.

Setting Up Husky and Git Hooks: A Step-by-Step Guide:

1. Installation: Getting Started with Husky

Begin by installing Husky as a dev dependency within your project. A simple npm command sets the stage for harnessing its power.

npm i husky@latest --save-dev
Enter fullscreen mode Exit fullscreen mode

Note: Node 18+ is required for compatibility.

2. Initialise: Setting up Husky

Simplify Husky setup with the init command, which creates a pre-commit script in .husky/ and updates the prepare script in package.json:

npx husky init
Enter fullscreen mode Exit fullscreen mode

3. Configuration: Tailoring Hooks to Your Workflow

Customize Git hooks to match your project's needs. For instance, create a pre-commit script in the .husky directory to execute before git commit:

touch ./.husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

Add an echo statement to verify the pre-commit hook execution:

echo "hello from pre commit" > ./husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

Stage and commit all files to confirm the pre-commit hook setup:

$ git add .
$ git commit -m "init"
Hello precommit
[main (root-commit) 2bb0f31] init
 13 files changed, 184 insertions(+)
 create mode 100755 .DS_Store
 create mode 100755 .husky/pre-commit
 create mode 100755 index.html
 create mode 120000 node_modules/.bin/husky
 create mode 100755 node_modules/husky/LICENSE
 create mode 100755 node_modules/husky/
 create mode 100755 node_modules/husky/bin.mjs
 create mode 100755 node_modules/husky/husky
 create mode 100755 node_modules/husky/index.d.mts
 create mode 100755 node_modules/husky/index.mjs
 create mode 100755 node_modules/husky/package.json
 create mode 100755 package-lock.json
 create mode 100755 package.json
Enter fullscreen mode Exit fullscreen mode

4. Automating Version Updates: Elevating Efficiency

Integrate automation with tools like bumpp to effortlessly manage version updates. Witness the magic of version management unfold before your eyes:

$ npm i bumpp --save-dev
Enter fullscreen mode Exit fullscreen mode

Configure bumpp settings in bump.config.ts for enhanced version control:

// bump.config.ts
import { defineConfig } from 'bumpp';

export default defineConfig({
   * Indicates whether to create a git commit. Can be set to a custom commit message string
   * or `true` to use "release v".  Any `%s` placeholders in the message string will be replaced
   * with the new version number.  If the message string does _not_ contain any `%s` placeholders,
   * then the new version number will be appended to the message.
   * Defaults to `true`.
  commit: false,

   * Indicates whether to tag the git commit. Can be set to a custom tag string
   * or `true` to use "v".  Any `%s` placeholders in the tag string will be replaced
   * with the new version number.  If the tag string does _not_ contain any `%s` placeholders,
   * then the new version number will be appended to the tag.
   * Defaults to `true`.
  tag: false,

   * Indicates whether to push the git commit and tag.
   * Defaults to `true`.
  push: false,

   * Bump the files recursively for monorepo. Only works without `files` option.
   * @default false
  recursive: false,

   * Indicates whether to bypass git commit hooks (`git commit --no-verify`).
   * Defaults to `false`.
  noVerify: true,

   * Indicates whether the git commit should include ALL files (`git commit --all`)
   * rather than just the files that were modified by `versionBump()`.
   * Defaults to `false`.
  all: false,
Enter fullscreen mode Exit fullscreen mode

5. Prompting for Version Updates: Balancing Automation with Interactivity

Elevate version management with interactive prompts using bumpp. Strike the perfect balance between automation and human intervention, ensuring accuracy and control throughout the versioning process.

Update package.json to include the version update script:

"scripts": {
    "prepare": "husky",
    "bump-version": "npx bumpp --preid canary"
Enter fullscreen mode Exit fullscreen mode

Update pre-commit hook to execute the script

exec < /dev/tty

npm run bump-version

git add package.json package-lock.json
Enter fullscreen mode Exit fullscreen mode

Commit the changes and observe the hooks in action:

$ git add .
$ git commit -m "bump setup"
Enter fullscreen mode Exit fullscreen mode

Here's how it works.

Image description

Conclusion: Empowering Developers with Streamlined Version Management

By harnessing the combined might of Git hooks and Husky, developers can transcend the shackles of manual version management. Automation becomes the norm, enabling teams to maintain consistency, accuracy, and efficiency across projects. With the added touch of interactive prompts and adherence to Semantic Versioning, developers retain control and oversight, ensuring that each version update aligns seamlessly with project goals and standards.

Additional Resources:

Dive deeper into the world of Husky with the official documentation.
Explore the capabilities of Standard Version through its comprehensive documentation.
Unravel the mysteries of semantic-release with its detailed documentation.
Discover the versatility of bumpp with its comprehensive documentation.

With Git hooks and Husky as your allies, version management evolves from a daunting task into a seamless and efficient process. Embrace automation, embrace interactivity, adhere to Semantic Versioning, and unlock the full potential of your development workflow.

Top comments (0)