How to set up a new project using Yarn

Let’s see how we could set up a shiny new JavaScript project using Yarn package manager. We are going to set up nodenv, install Node.js and Yarn, and then initialize a new project that we will then be able to use as a foundation for our further ideas.

Setting up nodenv

First, we are going to need Node.js. I use nodenv to manage multiple Node.js installations on my machine. The easiest way to install it on a Mac is to use Homebrew (check their Installation documentation if you’re on a different platform):

brew install nodenv

After that, add the following line to the bottom of your .zshrc or .bashrc file (for me it is located in the home directory, a.k.a. ~):

# ~/.zshrc

# ...

eval "$(nodenv init -)"

From now on, every time you run node, nodenv will automatically pick the Node.js version specified in a .node-version file.

Setting up Node

Now, let’s create our project directory and add the latest Long Term Support version of Node.js (at the moment of writing it’s 18.16.0, check the Node.js website if you’re not sure) to the .node-version file:

# Create the project directory
mkdir project

# Change into it
cd project

# Tell nodenv to use Node 18.16.0 in your project's directory
echo "18.16.0" > .node-version

To smoke-test the installation, run

node --version

If there’s no such Node installation on your machine (which was the case for me), you’ll see an output similar to this:

nodenv: version `18.16.0' is not installed (set by /Users/anton/project/.node-version)

To fix that, use nodenv to install the Node version specified in the .node-version file:

nodenv install $(cat .node-version)

Nodenv will download and install Node:

Downloading node-v18.16.0-darwin-x64.tar.gz...
-> https://nodejs.org/dist/v18.16.0/node-v18.16.0-darwin-x64.tar.gz
Installing node-v18.16.0-darwin-x64...
Installed node-v18.16.0-darwin-x64 to /Users/anton/.nodenv/versions/18.16.0

Now our little smoke-test should return the correct version:

node --version
# => v18.16.0

Setting up Yarn

Yarn is a package manager — a tool that allows you to use code from other developers. As Yarn installation documentation mentions, the preferred way to install Yarn is to use Corepack - a built-in tool for “managing versions of your package managers”. Let’s enable Corepack and install the stable version of Yarn:

# Enable Corepack
corepack enable

# Install Yarn
corepack prepare yarn@stable --activate

Run a smoke-test to see if the installation was successful. The following command should return a version, for me it was 3.6.0:

yarn --version
# => 3.6.0

Setting up the project

Now that we have our package manager in place, let’s use it to initialize the project:

yarn init

The command above will create several configuration files and initialize a git repository in our project folder, here’s what some of them are for:

• .editorconfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. Find more information on the EditorConfig website if you’re curious.
• .gitattributes helps git manage your project files better. See more information on the git website.
• .gitignore specifies which files are not supposed to be tracked by git. See more information here.
• .yarnrc.yml contains Yarn configuration. See more in Yarnrc files documentation.
• package.json contains information about the package, such as name, packageManager, and so on.
• README.md is a Markdown file where you can write some documentation.
• yarn.lock helps Yarn get consistent installs of dependencies (packages) across different machines. Find more in yarn.lock documentation.

We are not going to use Plug’n’Play or Zero-Installs, because those two have their pros and cons and are considered advanced features, so let’s disable them. To do that, we are going to change the .gitignore file so that the !.yarn/cache line is commented out instead of pnp.*. We will also add a node_modules line:

# .gitignore

.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# Swap the comments on the following lines if you don't wish to use zero-installs
# Documentation here: https://yarnpkg.com/features/zero-installs
# !.yarn/cache
.pnp.*

node_modules

Next, we will update the .yarnrc.yml file. Set the nodeLinker property to node-modules so that our packages are installed in the old-fashioned manner:

# .yarnrc.yml

yarnPath: .yarn/releases/yarn-3.6.0.cjs
nodeLinker: node-modules

Finalize the setup by running yarn install or just yarn. This will create the node_modules directory.

Smoke test

Let’s make sure that we can packages and run code. We will install lodash, call a function from it, and print the output.

Install lodash:

yarn add lodash

Create an index.js file with the following content:

// index.js

const now = require("lodash/now");

console.log(now());

Run the index.js, it will print the current timestamp:

yarn node index.js
# => 1686935711710

That’s it! Now you can use this setup as a solid foundation for your future app.

Feedback

You can find the source code in this GitHub repository. If you have any feedback, please feel free to submit an Issue.