DEV Community

Jonathan Yeong
Jonathan Yeong

Posted on • Originally published at jonathanyeong.com on

Use Yarn in your Phoenix App

Yarn, like NPM, is a package manager to manage your front-end packages. When creating a Phoenix project you can’t specify whether to use NPM or Yarn. And it doesn’t look like there’s any plan to support this; see github comment.

Prior to NPM 6, Yarn had a richer feature set and was more performant. But with the update, it looks like NPM has caught up with Yarn. So why switch?

If you’re just starting out, NPM is a great choice. But if you’re used to Yarn or want to explore a new package manager, then here’s a quick tutorial on adding it to your Phoenix application.

Install Yarn

I installed Yarn on my Mac with Homebrew. For further installation instructions see the Yarn docs.

brew install yarn

Enter fullscreen mode Exit fullscreen mode

Initialize Yarn

Navigate to the assets folder in your Phoenix app.

cd ~/<phoenixapp>/assets
yarn init

Enter fullscreen mode Exit fullscreen mode

After running yarn init you will be prompted for information on various items. The only prompt I filled out was for the entry point.

question entry point (index.js): app.js

Enter fullscreen mode Exit fullscreen mode

You can open up package.json and see the results of yarn init. Feel free to edit these at a later time.

Generate Yarn.lock

Run the yarn command to generate a yarn.lock file.

cd ~/<phoenixapp>/assets
yarn

Enter fullscreen mode Exit fullscreen mode

I recommend removing the package-lock.json file since Yarn won’t be using it.

That’s it! You should now be ready to use Yarn to manage your front-end packages.

Top comments (0)