Git Hook – npm install if package.json is Modified

By  on  

Most of the projects I work on these days contain a frequently-modified package.json file to manage dependencies.  You would think by know I'd be used seeing the package.json file when I did a git pull and it would trigger something in my head to execute npm install to ensure I had the latest dependencies installed but I somehow continue to forget to do so.  Instead I see npm start  result in errors which leads to facepalm after facepalm.  It's probably time to automate this task.

A quick Google search led me to a series of gists to use a git hook to trigger npm install if a package.json file has been updated. Place a post-merge file in your .git/hooks directory with the following contents:

#/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com

# git hook to run a command after `git pull` if a specified file was changed
# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.

changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

check_run() {
	echo "$changed_files" | grep --quiet "$1" && eval "$2"
}

# Example usage
# In this example it's used to run `npm install` if package.json changed and `bower install` if `bower.json` changed.
check_run package.json "npm install"
check_run bower.json "bower install"

Reading down the comments in the gist show a number of other useful conditional triggers, like PHP's composer install, preprocessing of .sass files, and more.

# Updating git submodules
check_run .gitmodules "git submodule init && git submodule update"

# Installing composer dependencies
check_run composer.json "composer install"

# For those who use gulp
check_run web/assets "gulp --production"

This hook will be incredibly useful for me moving forward -- no more needing to remember steps I need to execute upon every pull!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    Cross Browser CSS Box Shadows

    Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

  • By
    spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?

Discussion

  1. Lars

    I’m using the same script for all the projects I’m working on, just with a small addition bower and number I run number prune && number install. To make sure only packages are installed that are actually in the package.json and bower.json

  2. Tim

    I agree with Lars’ point about adding npm prune to the hook. Pruning removed packages will help you make sure you don’t get false positives by writing code that depends on a package that isn’t part of the repo.

  3. Pretty cool trick. I’ll have to add this script, along with Lars’ tip.

  4. How would you go about checking if npm is installed first? What if some of your dev team, for instance, does not have NodeJS installed?

    • Jamie

      What if they are using svn instead of git?

  5. Robert

    The shebang is missing from the first line, it should start with hashmark-exclamation mark

  6. Samuel

    Is it possible to check if the change is in dependency in npm?

  7. Arrived here after getting burned one too many times by silent dependency upgrades. This really helped. Thank you!

  8. Thomas

    I’ve written an npm package that solves that problem. Any feedback would be welcome!
    https://github.com/tkglaser/pkgmon#readme

  9. Tim

    npm prune docs say you don’t need to run npm prune.

    > In normal operation, extraneous modules are pruned automatically, so you’ll only need this command with the –production flag.

    https://docs.npmjs.com/cli/v7/commands/npm-prune

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!