Javascript Dev Environment under Ubuntu in 2021

As I mentioned in a previous post about setting up a Python dev environment, I have a new Ubuntu 21.04 installation and I’m revisiting my day-to-day tools with an eye towards improving how I install and configure them.

Learning more about Node.js as well as having a deeper understanding of modern Javascript development is on my list of things to do. For now, all I need is a minimal environment so that I can make use of Microsoft’s Language Server Protocol (LSP). If you haven’t taken a look at LSP, you should!

In my case, as an Emacs user, I’ve been able to simplify and streamline my configuration for numerous programming languages, all by exploring the resources on the Emacs lsp-mode website.

I won’t go into my editor configuration now, instead, I’ll focus on what needs to be done to get the bare minimum Javascript environment configured for Ubuntu.

Minimum Javascript Environment

So what are these core tools to be installed?

  • nvm – Installs and manages Node.js versions.
  • node.js – A runtime so we can execute Javascript code.
  • npm – The original Javascript package manager.
  • yarn – Another Javascript package manager because… the community can’t decide on one?

As you can see in this screencast, getting things installed is pretty quick and is done in under a minute. Below you can find more details and specific commands related to each tool!

nvm

Nvm helps to install and manage different versions of Node. The actual installation of nvm is pretty easy and is outlined within the project’s readme on Github. Basically, the steps are to clone the repo and ensure that it’s correctly loaded in your shell.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Once that repo is in place, we can add a block to our .zshrc file:

# Configure node dev environment
if [ -d "$HOME/.nvm" ]; then
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
fi

node.js

With nvm installed, we’re one command away from having node:

nvm install node

This will download the latest version as well as set that version as the default. There are some crufty projects I still haven’t upgraded, so I’ll list other node versions with nvm ls and install an older LTS release with nvm install lts/fermium:

★  ~ % nvm ls      
->      v16.6.1
default -> node (-> v16.6.1)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.6.1) (default)
stable -> 16.6 (-> v16.6.1) (default)
lts/* -> lts/fermium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.4 (-> N/A)
lts/fermium -> v14.17.4 (-> N/A)
★  ~ % nvm install lts/fermium
Downloading and installing node v14.17.4...
Downloading https://nodejs.org/dist/v14.17.4/node-v14.17.4-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.17.4 (npm v6.14.14)

npm

Having a section for installing npm is a little misleading since installing node also installs npm. One thing I want to call out which wasn’t obvious to me at first – each version of node comes with its own version of npm:

★  ~ % nvm install lts/fermium
Downloading and installing node v14.17.4...
Downloading https://nodejs.org/dist/v14.17.4/node-v14.17.4-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.17.4 (npm v6.14.14)
★  ~ % npm --version
6.14.14
★  ~ % nvm use stable
Now using node v16.6.1 (npm v7.20.3)
★  ~ % npm --version
7.20.3

yarn

Honestly, I’m a little fuzzy when it comes to knowing when to use npm and when to use yarn. My rule of thumb is to look at the repo and see if it has a yarn.lock file.

Anyway, just so we’re prepared for any project that comes our way, we can use npm to install yarn globally for our user:

npm install -g yarn