Better Control of your CI pipeline with Git Hook and Husky

Photo by Andriyko Podilnyk on Unsplash

Recently when I publish a npm package I ran into some eslint error notified by >husky --prepush That’s really interesting, as I didn’t know that we can have some “pre-check” before we push the code and trigger a CI check like that performed by jenkin or Travis CI.

So I look into this Husky package, and quote its official statement:

Husky can prevent bad git commit, git push and more 🐶 woof!

How cute and nice is that!

But before we dive in, we need to know a bit more about Git Hook.

So what is it? Well, think it like some scripts which we can customise and will be fired off at certain actions (e.g. push ). These hooks are stored in the hooks subdirectory of the Git directory. In most projects, that’s . git/hooks . You can read the amazing Atlassian Documentation on installation of git hooks.

There are two groups of these hooks: client-side and server-side. But here we only focus on client-side, which are hooks that are called and executed on the local repo. For example:

• pre-commit — as the name suggests, runs on git commit before the commit action is triggered
• pre-push — runs after the remote refs have been updated during push but before any objects have been transferred.

So you can see all these commands give you a fine-tuned control over your version control. But if you do some Googling, you will find writing these scripts — even not extremely challenging, is still hassle and ideally should be automated.

That’s where Husky comes into rescue 🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶🐶!

As we explored earlier, Husky makes the Git Hook hassle free. Simply install the package like below:

npm install husky --save-dev

Then in package.json :

{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

Now try make some changes in the repo and commit:

git commit -m 'Keep calm and commit'

You will find that a npm test script is triggered before you can commit.

So why Husky makes you life easier?

There are 3points:

- Find and resolve issue before push to remote

We all have experienced when we push some changes to the remote repo, and some CI check start running and “oops — sorry we spot an bug!”, so now you have to go back to fix the bug and push it to remote again.

While it’s not bad to have a work flow like this, but it can be obviously better by finding and resolving the bug before a CI pipeline is even triggered. (I know we should all run test before push changes, but we are all humans and it can happen that we will forget doing it sometimes)

For example, I put:

"prepush": "npm test"

Then anytime before I push to remote, I will be forced to run test locally.

- Automated end-to-end safeguard major event through preparation and clean-up

It’s a bit hard to explain but let me give you an example.

Let’s say I need to make some changes to my npm package and publish it (It is a major event right?). Of course I will remember to do things like npm version and npm publish, but I also want to make sure that I don’t forget any details:

• Have I run the test before versioning?
• Have I add a tag to my Github repo after versioning?
• Have I check all the linting rules and run all the test again before publishing?
• Have I run a production build before publishing?
• Have I remember to upload public assets to CDN to cache them after publishing ?

One way is to put them in Readme and just pray that everyone will follow the instruction. But this relies on human and thus error-prone.

But with Husky, I can just put script as below:

//package.json
....
“scripts”: {
 ...
  “preversion”: “npm test”,
  “postversion”: “git push origin master — tags — no-verify”,
  “postpublish”: “npm run upload-assets”,
  “prepublishOnly”: “npm run ts && npm run build:prod”,
  “prepush”: “npm run lint && npm run ts && npm test”,
 ...
},

Now, you can see whenever I do npm version or npm publish , my checkboxes will be automatically ticked by Husky.

For a major event like this, you want to automate scripts for pre- and post-event to make sure you have not missed any details and prepare /clean up everything needed.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

So in summary, Git Hooks can’t replace your normal Continuous Integration, but they give you better control of your CI pipeline and prevent errors through pre/post- event checks.

And Husky, as an amazing npm module, can save you the hassle from setting up Git Hooks script yourself to use npm script directly. 🐶🐶🐶🐶