How to set up a new project using Yarn in 2024

Let’s see how we could set up a shiny new JavaScript project using the 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 20.13.1, 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 20.13.1 in your project's directory
echo "20.13.1" > .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 `20.13.1' 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)

If it fails to install this version, make sure that your node-build is up-to-date and try again:

brew update && brew upgrade node-build

nodenv install $(cat .node-version)

Nodenv will download and install Node:

Downloading node-v20.13.1-darwin-arm64.tar.gz...
-> https://nodejs.org/dist/v20.13.1/node-v20.13.1-darwin-arm64.tar.gz
Installing node-v20.13.1-darwin-arm64...
Installed node-v20.13.1-darwin-arm64 to /Users/anton/.nodenv/versions/20.13.1

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

node --version
# => v20.13.1

Setting up Yarn

Yarn is a package manager — a tool that allows you to use code from other developers. According to Yarn installation documentation, 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 4.2.2:

yarn --version
# => 4.2.2

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.

• 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.

Also, the command might tell you that there is a new version of Yarn available:

➤ YN0088: A new stable version of Yarn is available: 4.2.2!
➤ YN0088: Upgrade now by running yarn set version 4.2.2

➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 23ms

So, just for the sake keeping stuff as up-to-date as possible, set the Yarn’s version to the suggested one:

yarn set version 4.2.2

Finalize the setup by running yarn install or just yarn:

yarn

➤ YN0000: · Yarn 4.2.2
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 25ms

Project 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

# => 1715420455747

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

Feedback

You can find the source code here:

prutya / tutorial-project-setup-yarn-202405011

06_project_setup_yarn_20240511

View on GitHub

If you have any feedback, please feel free to submit an Issue.

My original blog post