How to install Node.js with pnpm (even if you are a pro)

A timeless guide for how to setup Node.js development environment.

by Ben McNeill
node.jsprogramming

This guide is gonna set you up for success working with Node.js AND will save you a ton of time down the road.

If you are already running node using NVM you can hop down to the PNPM section

What is Node.js?

Node.js lets you run javascript outside the browswer! If you have a way to run javascript from your terminal for example you unlock huge capabilities. For example you can build desktop apps using html, css, javascript using electron OR you can build mobile apps using react native. Node.js is non-negotiable for aspiring developers so lets get you setup.

Before we jump in lets visit the pre-requisites for this tutorial.

Pre-requisites

Install Node.js

Like most things in life there are many ways to accoplish a task.

Installing node.js is no different. You can download the installer from the nodejs.org website. Alternatively you can use NVM (Node Version Manager). NVM lets you easily install and swich between different versions of node.

I prefer the NVM route and think you will too so let’s get NVM setup.

Hop into your browser and search nvm github + operating system. If you are on windows you will want to check out nvm-windows. If you are on a mac or linux you will likely land onthe nvm repository

NVM Github Repos

NVM commands

Once you have NVM setup we can try a few useful commands.

View nvm version

nvm --version

List all available node versions for your operating system

nvm ls-remote

Install the latest LTS version of node

nvm install --lts

List all installed versions of node

nvm ls

Use the latest LTS version of node

nvm use --lts

If you swap versions you may need to re-install globals

npm vs pnpm

npm is the default package manager for node.js. It how you get 3r’d party packages from npmjs.com into your project. Many people still use it but pnpm has some nice advantages. Don’t take my word for it, Theo will fill you in.

Install pnpm

npm i -g pnpm

Project

So far we have learned some good stuff but we need to put it to use. Let’s get our hands dirty and build something with node.js and pnpm!

Create project directory

We will create a new directory, initialize package.json, install npmjs.com/package/json-server rest api server from the node registry, and slam the server with a few requests.

mkdir pnpm-tut && cd pnpm-tut

Initialize pnpm

pnpm init

Install dependencies

With npm you would install a package using npm install. With pnpm you can use pnpm install. All the npm packages will work with pnpm.

For example, lets install the popular http client axios.

pnpm install axios

Alternatively

pnpm add axios

You can also remove a package like so.

pnpm remove axios

install dev dependencies

With pnpm you install dev dependencies using the -D same as with npm.

pnpm install -D @types/node

pnpx

In pnpm land you want to use the pnpx command (the npm alternative to npx).

Let’s hop over to our code editor and try out pnpx.

To get this part of the tutorial we will need to work with json-server.

First things first, create a db.json in your current directory and paste in the example json. Once you have the json file saved we can create a light weight api server and start talking to our json!

touch db.json

Let’s load up our db.json with the following data.

{
  "todos": [],
  "authors": [
    {
      "id": 1,
      "firstName": "Ben McNeill"
    }
  ],
  "posts": [
    {
      "id": 1,
      "url": "https://lazydevschool.com/posts/how-to-generate-an-ed25519-ssh-key-pair",
      "title": "How to Generate an ed25519 Key Pair for SSH Authentication",
      "video": {
        "url": "https://www.youtube.com/watch?v=WQgjVp3WQdM",
        "meta": "https://www.youtube.com/oembed?format=json&url=https://www.youtube.com/watch?v=WQgjVp3WQdM"
      },
      "pubDate": "",
      "authorId": 1
    },
    {
      "id": 2,
      "url": "https://lazydevschool.com/posts/setup-nodejs-and-pnpm",
      "title": "Install Node.js with PNPM using NVM (for mac, linux, and windows)",
      "video": {
        "url": "https://www.youtube.com/watch?v=kwkyrMagJ5I",
        "meta": "https://www.youtube.com/oembed?format=json&url=https://www.youtube.com/watch?v=kwkyrMagJ5I"
      },
      "pubDate": "",
      "authorId": 1
    }
  ]
}

This command will start the api server (option 1).

pnpx json-server --watch db.json

Running custom scripts

Here is an alternative way to start the api server. I prefer this method becuase once it is setup there is less key strokes involved to get it running.

To get this to work right we need to update our package.json file with a custom script.

P.S. I throw a curve ball at you and specify a custom port. json-server defaults to port 3000.

  "scripts": {
    "jss:remote": "pnpx json-server --watch db.json --port 4000"
  },

You can run this two different ways. The first way is using pnpm feature parity with npm. The Second way saves you a few key strokes.

Method 1

pnpm run json-server

Method 2

pnpm json-server

If you are following along you will notice each time pnpx runs there is a lag due to start the api server using package.json script

  "scripts": {
    "jss:remote": "pnpx json-server --watch db.json --port 4000",
    "jss:local": "json-server --watch db.json --port 4444"
  },

Try out your new script!

pnpm jss:local