How to automatically manage Node versions

by Matt Fantinel
10 Sep 2023 - 3 min read

If you're like me, you're constantly jumping between projects, and often those projects need different versions of NodeJS. Ideally, all of them would be using (or compatible with) the latest version, but in reality a lot of those projects are old and you just don't have the time to update them and make sure all dependencies play nice.

When jumping between them, it's usually a pain to remember which Node version to use and have to switch to that version. Tools like nvm make it easy to switch, but it's still a manual task that we often forget to do.

Turns out, you can use nvm to automatically switch the NodeJS version when you cd into a folder! All you need is a file in your project and a few lines of magic in your bash/zsh profile.

Configuring your shell profile to change Node versions

The first step is to edit your shell profile file, so that every time you cd into a folder, it checks if there's a .nvmrc file and if so, it switches to that Node version.

If using zsh

If you're using zsh, you can add the following to your .zshrc file:

.zshrc
shell

# Automatically use Node version specified via .nvmrc file

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

If using bash

With bash, you can add the following to your .bash_profile file:

.bash_profile
bash

# Automatically use Node version specified via .nvmrc file

# place this after nvm initialization!
load_nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

if [ -n "$BASH_VERSION" ]; then
  PROMPT_COMMAND="load_nvmrc; $PROMPT_COMMAND"
fi

Creating a .nvmrc file

Inside your project folder, create a file called .nvmrc and add the Node version you want to use. For example, if you want to use Node 14.18.0, you'd add the following to the file:

shell
v14.18.0

You need to do this for every project that needs a specific NodeJS version. If you don't add a .nvmrc file, nvm will use the default.

Written by

Matt Fantinel

I’m a web developer trying to figure out this weird thing called the internet. I write about development, the web, games, music, and whatever else I feel like writing about!

About

Newsletter? I have it!

I have a newsletter as another way to share what I write on this blog. The main goal is to be able to reach people who don't use RSS or just prefer getting their articles delivered straight into their inbox.

  • No fixed frequency, but at least once at month;
  • I do not plan on having content exclusive to the newsletter. Everything on it will also be on the blog;
  • I will never, ever ever ever, send you any form of spam.

You might also like

View blog

Setting up Storybook on an Astro project

7 min read

I really, really thought this was gonna be easy.

Front-End
Read

Separating my website's content from its code

4 min read

Having an open source website is great, but having the content stored in the same spot as the code has some issues. On this post I walk through what I did to keep them separated.

Meta
Read

Automating Social Media Preview Images

6 min read

Social media preview images are very useful if you want to attract people to your website. They're sometimes a pain to create, though. Let's automate it!

Front-End
Read

Progressive Enhancement (and why it matters)

8 min read

Progressive Enhancement isn't just another web jargon; it's a guiding principle shaping modern web development.

Front-End
Read