Introduction

There are various Git pre-hooks that are quite helpful for several essential tasks we want to execute before git commit or push or rebase etc. Basically, there are various use cases, like running linting before you commit the code or running unit tests before commit or push.

Note: Whenever a Git repository is initialized, Git creates sample hooks inside.git/hooks directory under the project directory. E.g..git/hooks/pre-commit.sample. Remember this is hidden directory.

Getting Started

Below are the steps on how to configure pre-commit Git pre-hook for an NPM project.

1. Create a pre-hook script

Let's create apre-commit file inside a newscripts directory. Use case is to execute the unit tests before code commit.

Note: The file name needs to be strictly aspre-commit, because we’re going to Git pre-hook mechanism.

#!/bin/shecho"*****Running unit tests******"stash_commit="$(git stash create)"git reset —-hardnpmtest----watchAll=falsestatus=$?if[[-n"${stash_commit}"]]thengit stash apply"${stash_commit}"fiexit$status

Above command stash the working directory changes before running the unit tests, and unstash back. This makes sure, we're running the tests only in the clean working directory. (as this is been configured for pre-commit, changes must have been staged, make sense?😀)

2. Create NPM script

Next up, create an NPM script in thepackage.json file to install thepre-commit script. Why do we need it? because, we want this to run on all developers' machine, not just on our machine, we all love consistency and wants to put the constraint.

"scripts":{"prestart":"cp scripts/pre-commit .git/hooks/ && chmod +x .git/hooks/pre-commit && echo 'hook copied'",...}

Here thepre-commit file is created inside project root directory i.e.scripts

The above NPM script first copy the already createdpre-commit file under project’s Git hook directory and set the executable permission, finally just print the message. As we have configured it to run as a part of prestart script, it will run whenever someone starts the application and assuming that developer who is making changes will run thenpm start at least once and I hope I'm right😉.

Once pre-commit script is copied to.git/hooks/ directory, we're all set. We can verify its content as below:

cat .git/hooks/pre-commit

Now, next time whenever someone will rungit commit, it will first run thenpm test -- --watchAll=false.

E.g.

ak@--mac git-pre-commit-with-npm % git commit-am"update"-- Output*****Running unit tests******> git-pre-commit-with-npm@0.1.0test /users/ak/git-pre-commit-with-npm> react-scriptstest"--watchAll=false" PASS  src/App.test.js  ✓ renders learn reactlink(29 ms)Test Suites: 1 passed, 1 totalTests:       1 passed, 1 totalSnapshots:   0 totalTime:        0.964 s, estimated 1 sRan alltestsuites.[main 0b432f0] update 1 file changed, 4 insertions(+)

Final Notes

• The waynpm test is configured, in the same way, any other tasks can be executed. And of course for other tasks stash and unstash won't be compulsory.
• Similarly other pre-hooks can be configured. Here are a few more examples,Pre-hooks Examples.

Sample Code

Here is theGitHub repo with an example.

My other Blogs:

• Cracking Software Engineering Interviews
• Setup GraphQL Mock Server
• ⁠Supercharge Your E2E Tests with Playwright and Cucumber Integration
• Micro-frontend Decision Framework
• How to Reduce Page Loading Time - Part 1
• Barrel - Best Way to Import Files in Modern JavaScript Apps
• Avoid Spring RestTemplate Default Implementation to Prevent Performance Impact
• How to use external font with web component
• Setup pre-hook for Gradle project
• Team Agreement in Software Engineering

If you have reached here, then I did a satisfactory effort to keep you reading. Please be kind to leave any comments or ask for any corrections.Happy Coding!