How to set up a new project using Yarn in 2024
Tags: webdev, javascript, node, programming
Published: 2024-05-11 10:20:13

Let’s see how we could set up a shiny new JavaScript project using the [Yarn](https://yarnpkg.com/) package manager. We are going to set up [nodenv](https://github.com/nodenv/nodenv), install [Node.js](https://nodejs.org/) 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](https://brew.sh/) (check their [Installation documentation](https://github.com/nodenv/nodenv#installation) if you’re on a different platform):

```bash
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. `~`):

```bash
# ~/.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](https://nodejs.org/) if you’re not sure) to the `.node-version` file:

```bash
# 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](https://en.wikipedia.org/wiki/Smoke_testing_(software)) the installation, run:

```bash
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:

```bash
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:

```bash
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:

```bash
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](https://yarnpkg.com/getting-started/install), the preferred way to install Yarn is to use [Corepack](https://nodejs.org/dist/latest-v18.x/docs/api/corepack.html) - a built-in tool for “managing versions of your package managers”. Let’s enable Corepack and install the stable version of Yarn:

```bash
# 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`:

```bash
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:

```bash
yarn init
```

The command above will create several configuration files and initialize a [git](https://git-scm.com/) 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](https://editorconfig.org/) website if you’re curious.

- `.gitattributes` helps git manage your project files better. See more information on the [git](https://git-scm.com/docs/gitattributes) website.

- `.gitignore` specifies which files are not supposed to be tracked by git. See more information [here](https://git-scm.com/docs/gitignore).

- `package.json` contains information about the package, such as `name`, `packageManager`, and so on.

- `README.md` is a [Markdown](https://www.markdownguide.org/) 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](https://classic.yarnpkg.com/lang/en/docs/yarn-lock/).

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:

```bash
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](https://lodash.com/), call a function from it, and print the output.

Install lodash:

```bash
yarn add lodash
```

Create an `index.js` file with the following content:

```js
// index.js

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

console.log(now());
```

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

```bash
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:

{% embed https://github.com/prutya/tutorial-project-setup-yarn-202405011 %}

If you have any feedback, please feel free to [submit an Issue](https://github.com/prutya/tutorial-project-setup-yarn-202405011/issues).

[My original blog post](https://www.prudkohliad.com/articles/setup-project-yarn-2024-05-11)