Menu
Article ember

Using Yalc for Ember Engine/addon Development

James C. Davis

James C. Davis

• 2 min read

When developing an Ember Engine (or other addon), you'll often want to test in a consuming host app that rebuilds when you make changes to the engine/addon. One way to do this is with yarn link (or npm link if using npm), which creates a symlink in the host app's node_modules directly to the engine/addon's development directory. This works pretty well, except when it comes to dependencies (among other issues). Yarn will not attempt to resolve the dependencies of a package linked with yarn link (nor npm with npm link). ?

Fortunately Yalc exists, which uses a local repository instead of symlinks. Another advantage of Yalc, is that is will simulate an actual publish, running any publish-related hooks your engine/addon may have (e.g. prepublish), giving you a closer-to-prod experience without having to actually publish.

To install Yalc, run:

yarn global add yalc

or, if using npm:

npm install -g yalc

or, better yet, with Volta (highly recommended):

volta install yalc

With Yalc installed, in the engine/addon directory, run:

yalc publish

which will publish the engine/addon to the local Yalc package repository.

Next, go to your consuming app's directory and run:

yalc add my-engine-or-addon-name

You've now added the development version of your engine/addon that you just published to your host app.

Next, run yarn to install dependencies:

yarn

You can now run your host app with:

ember serve

When you make an update to the engine/addon, in the engine/addon directory run:

yalc push

This will publish your changes and push them out automatically to any consuming apps that have yalc added the engine/addon. The consuming app should detect the changes and rebuild automatically.
Note: if you are using watchman, make sure you're not ignoring node_modules in your watchman config or watchman will fail to pick up changes. If you need to continue to ignore node_modules for some reason, you can work around this by using yalc add --link when you add the engine/addon to the host app.

Automating Pushes with Nodemon

You likely want changes to your engine/addon to be automatically pushed out to the consuming app so that the workflow is similar to what you get with yarn link. While Yalc does not have a watch mode, you can use Nodemon to do this.

First, install Nodemon globally with one of:

volta install nodemon

yarn add global nodemon

npm install -g nodemon

Now, in the engine/addon directory, run Nodemon and tell it to yalc push:

nodemon -e js,ts,hbs,css,scss -x yalc push

Note: We have to tell Nodemon to watch .js, .ts, .hbs, and .(s)css files because it only watches .js files (and a few others) by default.

Leave that running and it will automatically run yalc push on each change!

Note: if you have installed Yalc with Volta, you may have to specify the path to yalc. IMHO, the best way to do this is automatically using which:

nodemon -e js,ts,hbs,css,scss -x `which yalc` push

I recommend creating an alias for this. I use:

alias yalc-watch="nodemon -e js,ts,hbs,css,scss -x `which yalc` push"

and then I can just run:

yalc-watch

I hope you found this useful for setting up your Ember Engine/addon development workflow!

TL;DR?

  1. install yalc and nodemon globally
  2. in engine/addon: yalc publish
  3. in app: yalc add my-engine-or-addon
  4. in engine/addon: nodemon -e js,ts,hbs -x yalc push
Share