How to use shared components in multiple apps without addon

Question

we have a four apps that share a lot of components. So far we use addons to manage this shared code, but we're facing a lot of troubles with addons approach.

Something like this:

App1
- basic-form-elements-addon
- feedback-form-addon
- tables-management-addon
App2
- feedback-form-addon
- tables-management-addon
App3
- basic-form-elements-addon
App4
- basic-form-elements-addon
- tables-management-addon

The problem with this approach is that updating an addon is a quite long process involving a lot of steps:

Link addon into app (using yarn link)
Modify addon code
Publish addon into npm
Update dependency in App1
(and possibly if I have a time and energy, update dependency and usage in App2,3,4 as well or leave it for someone else who touches that code :cry:)

Apart from this, there are other problems - maintaining 8 different ember apps costs a lot of time - updating ember versions - updating other dependencies - maintaining same linting configs and other tooling

these are the biggest issues we face now with this approach.

I don't know what's the best solution to this problem, but my idea was that we would - merge all addons into one addon (now that it's possible to require just part of the ember tree, it shouldn't have a bad impact of a code size, right?) - move all code into one repository (kind of monorepo) - use addon not as npm dependency, but somehow import it from the sibling directory (I don't know if this is possible)

so at the end, we would end up with something like this

git (monorepo)
- App1
- App2
- App3
- App4
- shared-code
--- components
--- helpers
--- models
--- ...

Is that possible? What would I need to do to achieve this setup? Or do you have a better solution?

Thank you for any kind of help, Ondrej

i don't see what that wouldn't work. edit: only downside is you would be forced to update all the apps if you make a breaking change to one of the shared components. this might be a good thing however. — Christopher Milne
But how can I import components, helpers etc. from different folder? — ondrej

Suresh Kumar Suresh Kumar · Accepted Answer · 2017-11-27T15:28:56

I think you are looking for ember in-repo addons.

You can have all your addons and apps in same folder(mono-repo style), and use addons in your app by mentioning them in app's package.json file.

For example, if you have folder structure like this,

/addon-one
/addon-two
/app-one
/app-two

In each of your app's package.json, you'll have to mention

"ember-addon": {
 "paths": [
   "../addon-one",
   "../addon-two"
 ]
},

And you should be sharing your addons with both apps.

eg repo: https://github.com/sureshdunga/ember-in-repo-addon-example

How to use shared components in multiple apps without addon

1 Answers