How to set up a new project using Yarn
Tags: javascript, webdev, node, programming
Published: 2024-05-08 15:47:09

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):

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

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

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

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

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

```sh
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](https://yarnpkg.com/getting-started/install) mentions, 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:

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

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

```sh
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).
- `.yarnrc.yml` contains Yarn configuration. See more in [Yarnrc files documentation](https://yarnpkg.com/configuration/yarnrc).
- `package.json` contains information about the package, such as `name`, `packageManager`, and [so on](https://yarnpkg.com/configuration/manifest).
- `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/).

We are **not** going to use [Plug’n’Play](https://yarnpkg.com/features/pnp) or [Zero-Installs](https://yarnpkg.com/features/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:

```sh
# .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:

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

Install lodash:

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

```sh
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 here:

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

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

[My original blog post](https://www.prudkohliad.com/articles/setup-project-yarn-2023-06-16#setting-up-nodenv)