Share EmberJS common code between apps

Deprecation warning

I consider yarn workspaces a better solution for this problem right now. I wrote an article about yarn workspaces and the gotchas I encountered. Please check it out prior to reading this one.

Little background story

Lately, I've been working on a user-facing EmberJS app. The scope has expanded and we needed to implement an administrator interface. For various reasons, I decided that separate EmberJS app would be a good solution.

Bootstrapped new ember-cli project, started coding and right from the start, I noticed that I basically just copy-pasted authorization code from the original app. Later on the same with models. And finally, even some components seemed to be reusable. Seemed like there was room for improvement. So I tried to accomplish the following:

1. Reuse as much code between apps as possible.
2. Make sure that live-reload still works. I want to be able to edit frontend, admin or common code, save it and instantly see results.
3. Don't have to publish the common code anywhere.

Implementation

Reading through the blog posts and discussion forums, I found that the way to go is an addon.

At the start, the file layout is as follows. Two folders with my two projects:

.
├── admin
└── frontend

Next, generate the addon that will have the common code:

ember addon bp-ember-components

So the folder structure will look like this:

.
├── admin
├── bp-ember-components
└── frontend

Now to install the addon in our apps, just add it to package.json files. Use relative file path so that yarn can grab it directly from your disk. Since I'm using a monorepo for this project, even CI takes advantage of the fact that it's just a "neighbour" folder.

// admin/package.json and fronend/package.json
{
  "devDependencies": {
    "bp-ember-components": "../bp-ember-components/"
  }
}

To enable the magic of live-reload even when changing code in the common repo, add:

// bp-ember-components/index.js

module.exports = {
  isDevelopingAddon: function() {
    return true;
  }
};

And finally, link the addon in the node_modules in your apps:

cd ./bp-ember-components
yarn
yarn link

cd ../admin
yarn link bp-ember-components

cd ../frontend
yarn link bp-ember-components

And that's it. You can just start putting your models/components/etc. into the bp-ember-components and it will be available in both of your apps.