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-component-css to add styles to your application. Here’s how you do it.
First, put your component’s
component.js and (optionally)
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-cli-sass in your addon’s
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
And that should be all.