One of the great things about Ember.js is that it gives you all the building blocks you need to create “ambitious web applications”, just as the motto says. These can be large frontend apps or smaller pieces that can be plugged into others, just like if they were Legos.
At Wombat, we have numerous Ember apps that will be sharing functionality so there has been a need to develop addons like Supertable or Supersearch. While creating an Ember Addon is relatively simple and Ember even provides a “dummy” app that you can use to develop and test it, something I’ve found useful is adding functionality or fixing bugs in the context of a real application that is consuming the addon.
Yarn and npm make this relatively easy to do by creating a symlink between the two apps.
For our two apps, let’s just say we have an Ember addon called SuperGallery and we want to consume it in an app called WombatEmber.
The first thing to do is add this bit of code in the
index.js of the SuperGallery addon.
This will make the app live reload as we are making changes and saving in the addon code, so it will work just as it does when developing a normal Ember app.
Next, in the terminal in the addon (SuperGallery) project directory, run the following:
Now that we have this symlink created in the SuperGallery directory, we need to just link it to our
other app so it will use our local version instead of the one specified in our
To link it, all we need to do is go to the directory where our main Ember app lives, in this case,
WombatEmber and run the following with the
package-name of the addon, not the name of the directory.
package-name is the same as you would see in the
This is all you need to do to consume the local version of your addon in your Ember app. From here,
you can just run the app locally with
ember s or
ember serve and develop as you would normally. You
can change code in either app, add debuggers, etc., and it will live reload.
In my experience using it, especially if I’m trying to fix bugs in the addon, sometimes unexpected things happen in the consuming app due to other code or other dependencies in the app, that just don’t occur in the dummy app which is essentially a sandbox. It’s great to be able to see that something works as expected and not having to go back later to try to debug another issue. This method for linking also saves you the trouble of trying to dig into the node_modules in your Ember app to try to debug something in your addon. This can be annoying trying to add debuggers or new code, but then have to restart the server every time you make a change.
Using npm/Yarn link has definitely become part of my everyday workflow as I’m constantly working in addons in addition to the main app I’m helping develop. I hope this is helpful to other teams and people developing Ember Addons.