How to make an existing component reusable for multiple applications?

Design
1

Iam new to ember.Iam using ember-cli 1.13.15.Lately i was required by my organisation to make an ember component in a specific application , to be reusable for all applications .This component is responsible for requesting server regarding data , and displaying it in a pop-up.Is there any specific pattern to follow in ember to create reusable components across applications? I tried using in-repo-addon to put the component code in the addon , but the popup is not showing up. Should i copy the parent components which uses it , to the addon too?

2

Hi @karthikb welcome to Ember! I’ll warn you right upfront that the version of Ember you’re on is very out of date so a lot of the resources you will come across may be difficult to use, and it may take some of us a while to recall any specifics of the framework in the 1.13 versions.

That said this question is more general so here goes :grin:. If a component is to be used by multiple applications it should be put in an addon. An in-repo addon can only be consumed within the app that it is inside, so that doesn’t seem like it will fit your needs and you may want to consider a “full” addon as a standalone “project” (and repo, unless you’re using a monorepo). Most companies seem to end up with at least one addon with shared components (and other fun stuff) so this is a pretty common need.

When deciding what else the component will need you just need to determine what needs to be shared with it. If the popup itself is all the needs to be shared then there’s no need to put the parent component in the addon, but if the parent component is also common to all applications it should be included.

Anyway hope that helps a bit, please let us know if you have any other questions!

1 Like
3

Oh and another thing to note when putting a component in an addon…

An addon has two main directories for source code: /app and /addon. Your source should go in /addon (so for components it should be in /addon/components but to “mix” the addon components into the consuming apps namespace so they can be resolved you need to “re-export” the component in /app as well. A re-export for a component in /addon/components/my-component.js looks like this:

// app/components/my-component.js
export { default } from '<addon-name>/my-component';

(note that addon is not present in the import path above even though that’s where the actual file is located, it’s importing from the namespace not the actual filesystem locattion)

1 Like
4

Thank you for the guidance @dknutsen :+1:

5

Interesting and useful discussion. I appreciate your work, thanks for sharing! :handshake: