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.

Comments

[Joshua Bailey]

Good article! For the file setup have you looked into Yarn Workspaces (yarnpkg.com/lang/en/docs/workspaces/)... I would consider if your packages grow anymore in number.

[Michal Bryxí]

Awesome. Thanks for the tip. Did not know about workspaces. Tried and unfortunately found (at least) two Ember packages I'm using that will blow up when using yarn workspaces. Reported and it will hopefully be fixed soon. Then I will create a new article and deprecate this one :)

[Joshua Bailey]

No problem! yeah, I ran into some churn too while getting a large Ember monorepo transitioned to workspaces. There is a noHoist key you can provide in the root package.json, which will prevent the specified packages getting hoisted to the root of the project. This worked for most of my issues, but it’s not ideal to have this list long.