Streamline Your Workflow: Setting Up Git Hooks with Husky to Simplify Version Updates
Tags: javascript, productivity, git, webdev
Published: 2024-04-13 07:32:49


## Introduction

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.
```bash
npm i husky@latest --save-dev
```

> 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`:
```bash
npx husky init
```

### 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:
```bash
touch ./.husky/pre-commit
```

Add an echo statement to verify the pre-commit hook execution:
```bash
echo "hello from pre commit" > ./husky/pre-commit
```

Stage and commit all files to confirm the pre-commit hook setup:
```bash
$ 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/README.md
 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
```

### 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
```

Configure bumpp settings in bump.config.ts for enhanced version control:
```ts
// 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,
});
```


### 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:
```json
"scripts": {
    "prepare": "husky",
    "bump-version": "npx bumpp --preid canary"
}
```

Update pre-commit hook to execute the script
```
exec < /dev/tty

npm run bump-version

git add package.json package-lock.json
```


Commit the changes and observe the hooks in action:
```bash
$ git add .
$ git commit -m "bump setup"
```

Here's how it works.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v9znd183pdnt5fz597w.gif)




## 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](https://github.com/typicode/husky).
Explore the capabilities of Standard Version through its comprehensive [documentation](https://github.com/conventional-changelog/standard-version).
Unravel the mysteries of semantic-release with its detailed documentation.
Discover the versatility of bumpp with its comprehensive [documentation](https://www.npmjs.com/package/bumpp).


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.