MacOS Catalina, npm global installs and zsh

As MacOS switched to zsh replacing bash a while back (you may have noticed the prompt to change to zsh in your Terminal), I keep coming across a few issues that I need to work around. My latest was that I noticed apps I’d installed globally with ‘npm install -g’ were no longer in my path.

Following a combination of suggestions from answers to this question, I added the following line to ~/.zshrc to add the npm global install dir to my path:

export PATH="$PATH:$HOME/.npm-global/bin"

Fixing npm global install permissions on MacOS

By default npm on MacOS tries to install global modules (npm install -g somemodule) to /usr/local/lib/node_modules and you get this error:

Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'

The npm docs here have a couple of steps to avoid this by telling npm to install to a location where you have have access to:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Edit your .profile or .bash_profile to add the new location to your PATH:

export PATH=~/.npm-global/bin:$PATH

Now you should be all set!




Dependency management with npm

A few rough usage notes:

  • npm install module : download and install module. Saves dependency in node_modules by default
  • npm install module –save : saves module info in package.json
  • npm install module -g : downloads and installs module globally, not just in the current dir/project, so can be reused by all projects
  • npm init : creates a new package.json from answers to a few questions, plus any existing downloaded modules in node_modules (useful to recreate package.json if you didn’t install modules with –save initially)

Using bower for webapp package management: ui-date

Looking for a calendar widget to use with my AngularJS app, I found this one. This is also the first library I’ve come across where I’ve needed to use bower to install it for me. I’ve seen and used bower as part of the AngularJS tutorial, but this is my first experience using it out of necessity.

I already have node.js installed for the AngularJS tutorial, so installed bower globally using:

sudo npm install -g bower

and then installed the angular-ui date picker with:

bower install angular-ui-date --save

Following the rest of the steps to include the dependent js and css files, add the ui-date directive to an input field… and that was easy, now I have a jQuery UI date picker!