Using nvm with WebStorm or other IDE

TL/DR: If you use nvm, setting NVM_SYMLINK_CURRENT=true creates a symbolic link, $NVM_DIR/current whenever you switch node versions, which can make updating node much simpler for WebStorm or any other IDE.

If you do a fair amount of node development, or like me teach in the environment, updating node is a common task. And, instead of maintaining a single version, you probably want to be able to install multiple versions, switch between them, and make it easy to upgrade. Especially when you consider the various versions, including LTS, and how quickly the release cycle seems to be.

I personally use nvm (Node Version Manager) both for development, and even on the server. Described as a Simple bash script to manage multiple active node.js versions, it is easy to install with a command line install script.

The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR=”$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm

As it says above, nvm install everything it needs in your ~/.nvm folder and creates a number of bash variables to manage the version you are using. This is great for the command line, but not so great for various IDEs that request the location of your node interpreter. I’m going to be discussing the problem I have with WebStorm everytime I upgrade my version of node using nvm. However, the technique can be used with other IDEs or scripts as well.

From the command line you can ask nvm to list which versions are installed with ‘nvm ls’.

$ nvm ls
v4.5.0
v6.6.0
-> v6.9.1
default -> v6 (-> v6.9.1)
stable -> v4.5 (-> v4.5.0)
node -> stable (-> v4.5.0) (default)
iojs -> N/A (default)

The first 3 items are the versions of node I have installed (v4.5.0, v6.60 & v6.9.1)

The remaining items are aliases (default, stable, node & iojs). The nvm.sh script will automatically use the default version in a new command line shell. It does this by adding the it to the beginning of the shells PATH.

$ echo $PATH
/Users/zen/.nvm/versions/node/v6.9.1/bin:…..

It should now be clear that all the installed versions are in ~/.nvm/versions/node by default:

$ ls ~/.nvm/versions/node
v4.5.0/ v6.6.0/ v6.9.1/

If you want to change the version in the current shell, you can type “nvm use v4”, and it will update your PATH accordingly. It also updates MANPATH, NVM_BIN & NVM_PATH. These variables are great when you are doing development in BASH, and writing a shell script.

The issue I face with WebStorm, and other IDEs is I have to set the folder that contains node in about 4 to 6 different places per project. And, when you do an upgrade you will want to change the “Default Settings…” too so that any new projects will use them. Personally, I use all of these WebStorm Preferences under “Language & Frameworks >”

• Node.js and NPM
• TypeScript
• TypeScript > TSLint
• JavaScript > Code Quality Tools > ESLint

There has to be a better way to get all my projects to use the latest version of node installed by nvm! And there is.

nvm has the built in capability to create a symbolic link to the current version of node in $NVM_DIR/current:

$ export NVM_SYMLINK_CURRENT=true
$ nvm use default
$ ls -ld $NVM_DIR/current
lrwxr-xr-x 1 zen staff 6 Nov 9 18:50:53 2016 current@ -> /Users/zen/.nvm/versions/node/v6.9.1

You will likely want to add export NVM_SYMLINK_CURRENT=true to your startup script. Now whenever a program asks for where node is I can tell it:

~/.nvm/current/bin/node

And node_modules is located at:

~/.nvm/current/lib/node_modules

If I do this, when node version 6.9.2 comes out, I won’t have to change any settings in my IDE.

$ nvm install v6.9.2
$ ls -ld $NVM_DIR/current
lrwxr-xr-x 1 zen staff 6 Nov 9 20:50:53 2016 current@ -> /Users/zen/.nvm/versions/node/v6.9.2

Finally, WebStorm will now likely select ~/.nvm/current/bin/node as the Node Interpreter, or at least make it an option. If you have to, you can edit ~/Library/Preferences/WebStormXXXX.X/options/project.default.xml and change the nodejs_interpreter_path:

<application>
  <component name="ProjectManager">
    <defaultProject>
...
      <component name="PropertiesComponent">
...
        <property name="nodejs_interpreter_path" value="$USER_HOME$/.nvm/current/bin/node" />
      </component>
    </defaultProject>
  </component>
</application>

What do you think? Does this makes things easier for you? Do you have a better way? Let me know in the comment.