Applying Git hooks to your frontend application

How often have you experienced the scenario where you write code, push it to the repository, and then encounter a failed code build pipeline due to discrepancies in linting rules or code coverage thresholds set within the pipeline configuration?

Many times, right? But not anymore!

Let’s discuss how.

Simple solution is adding Local Git hooks to your frontend application.

What exactly are Local hooks?

Local hooks affect only the repository in which they reside. Each developer can alter their own local hooks, so they cannot be used as a way to enforce a commit policy. Yet, they can make it much easier for developers to adhere to certain guidelines. There are 6 local hooks make developers life easy:

1. pre-commit
2. prepare-commit-msg
3. commit-msg
4. post-commit
5. post-checkout
6. pre-rebase

The first 4 hooks let you plug into the entire commit life cycle, and the final 2 let you perform some extra actions or safety checks for the git checkout and git rebase commands, respectively. All of the pre- hooks let you alter the action that’s about to take place, while the post- hooks are used only for notifications.

How would they help me prevent failing the build pipeline?

Often, “npm lint” and “npm test” are integrated into the build process within the CI/CD pipeline. Failure to meet linting and test coverage standards results in pipeline failure.
To avoid this, and to detect issues before committing code to the repository, you can utilize pre-commit hooks.

Given the context and scenario, let’s proceed with configuring this.

Configuring pre-commit hooks can be done in two ways: utilizing established libraries such as husky or pre-commit, or by directly employing Git’s pre-commit hooks located in .git/hooks.

I would be taking an example for React application and would explain detailed steps for each.

Configuring using Husky library
Easiest way you can configure pre-commit hook is by installing husky library. Below are the steps for the same.

Step 1: Install husky library using:

npm install husky - save-dev

You should now see a .husky folder added to your project root directory.

Step 2: To add required commands like “npm test” and “npm lint” to pre-commit hook, create a file named “pre-commit” under .husky folder.

Step 3: Now open the pre-commit file you just created and add commands you want to be part of pre-commit as below to it:

npm test
npm lint

Step 4: Testing the above using following git commands:

git init
git add .
git commit -m "add lint-staged & husky"

Configuring ore-commit hooks of Git
Another easy way of adding pre-commit hooks is adding your scripts to pre-commit file in .git/hooks folder. The .git folder is present for every git project but is hidden.

Step 1: Add your commands to the postinstall script in your package.json file scripts.
The below postinstall script basically writes ‘npm test’ command to .git/hooks/pre-commit file and changes the permission of the file to write access.

"postinstall": "echo '#!/bin/bash\\nnpm test' > .git/hooks/pre-commit && chmod +x .git/hooks/pre-commit\n"

Step 2: Now run ‘npm install’ again

Step 3: Testing the above using following git commands:

git init
git add .
git commit -m "add lint-staged & husky"

Your pre-commit should be working.
Hope you enjoyed reading through this article.

Happy Coding!!

References
https://www.atlassian.com/git/tutorials/git-hooks