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 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 asname
,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 here:
If you have any feedback, please feel free to submit an Issue.
Top comments (0)