Git pre-hook: Setup pre-commit hook for NPM project example

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

Whenever a Git repository is initialized, Git creates sample hooks inside .git/hooks directory in the project directory. E.g. .git/hooks/pre-commit.sample

Below are steps on how to configure pre-hook for an NPM project:

1. Create a pre-hook script, let's create a pre-commit file inside a new scripts directory, and we want to run unit tests before code commit.

#!/bin/sh

echo "*****Running unit tests******"

git stash -q --keep-index

npm test -- --watchAll=false

status=$?

git stash pop -q

exit $status

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

2. Next, create an NPM script in the package.json file to install the pre-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 constraints.

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

Here pre-commit file was created inside project root directory i.e. scripts

The above NPM script will run whenever someone starts the React application and assuming that developer who is making changes will run the npm 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 run git commit, it will first run the npm 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.0 test /users/ak/git-pre-commit-with-npm
> react-scripts test "--watchAll=false"

 PASS  src/App.test.js
  ✓ renders learn react link (29 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.964 s, estimated 1 s
Ran all test suites.
[main 0b432f0] update
 1 file changed, 4 insertions(+)

• The way npm 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.
• And very similarly other pre-hooks can be configured

Here is the GitHub repo with an example.

My other Blogs:

• 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!

Comments

[Arthur Henrique]

Uol. It's actually a lot simple to set git hooks up... I was wondering the other hooks one could configure
Thanks for sharing!