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:
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:
You can now run your host app with:
When you make an update to the engine/addon, in the engine/addon directory run:
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
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
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:
I hope you found this useful for setting up your Ember Engine/addon development workflow!
- in engine/addon:
- in app:
yalc add my-engine-or-addon
- in engine/addon:
nodemon -e js,ts,hbs -x yalc push