Share components and assets via an Ember addon

Once your code base in Ember grows beyond a single application, you’ll probably get to the point where you would want to share your components and assets with multiple apps. Unfortunately, it’s not as straight-forward as it may seem. This tutorial will assume you have your app and addon created, you use pods to organize your file structure, and you optionally use ember-cli-sass and ember-component-css to add styles to your application. Here’s how you do it.

Sharing components

First, put your component’s template.hbs, component.js and (optionally) styles.scss into my-addon/addon/components/my-component/. Due to the way pod templates are (not) included into your apps by default, each component.js should contain an import of layout file:

Second, to make each component available to a consuming app, add my-addon/app/components/my-component/component.js, which should only contain a line like this:

Also, if you want to add component styles from your addon, don’t forget to include ember-component-css and ember-cli-sass in your addon’s package.json -> dependencies.

Sharing assets

But what about assets, like images or fonts? Turns out, that requires a bit of effort on your part as well. First, put your addon’s assets to my-addon/public. Second, you will need to indicate that your addon should copy files from public folder into your consuming apps as well. Add this to my-addon/index.js:

And that should be all.