Make use of an addon (my-demo-addon) in app and engine

Suppose if I want to make use of an addon in both app and engine then, which package.json (app’s or engine’s) is the right place for that? If we have to put the addon in both package.json then as dependencies and devDependencies?

You should install the dependency in the app package.json in devDependencies, e.g.:

  devDependencies: {
    ...
    'my-cool-addon': '1.0.1'
    ...
  },

And then in your engine package.json put it under dependencies with a * for the version, e.g.:

  dependencies: {
    ...
    'my-cool-addon': '*'
    ...
  },

EDIT: in an app devDependencies/dependencies aren’t really as important a distinction. But in an addon there’s a big difference. The way I think of it is, in an addon devDependencies are used to build or develop the addon, whereas dependencies are needed by the addon at runtime. Dependencies in an engine package.json will be compiled into the engine vendor js at build time (assuming it’s a lazy loaded engine at least).

1 Like

@dknutsen I tried the way you mentioned but in the engine when I try to access a helper of the shared addon I get compile error my-helper is not a helper. And also in my addon if I have a service then do I need to pass it down from app to engine by mentioning the dependencies in app.js and engine.js or can I access it directly?

For the helper… is it being re-exported properly from the addon? I can’t think of anything else you should need to do. Can you use the helper in your app?

As for services… it kinda depends. If you’re using a service as a way to share state between app and engine then you will need to pass the service to the engine. If it’s ok that the engine has a separate instance of the service with separate state you can use it as-is from the addon. Services are singletons, but if you’re not explicitly sharing the “app’s” version of a service you’ll end up with one app instance and one engine instance of the service.

1 Like

Yes I can access the helper in the app but not in the engine. I even tried to do the same by installing ember-google-maps and accessing a component provided by that in the engine but it did not work as expected.

Should we npm install after putting the shared-addon: "*" in package.json of engine?

Actually… I probably should have clarified this beforehand but… are the engine and addon in-repo addons or external addons? The above would apply to in-repo addon/engine.

If they are external packages then I think you’d want them the same way in both:

// app package.json
  devDependencies: {
    ...
    'my-cool-addon': '1.0.1'
    ...
  },
// engine package.json
  dependencies: {
    ...
    'my-cool-addon': '1.0.1'
    ...
  },

Then you’ll need to make sure your host app is pointed at the newest version of the engine, and then do an npm install and rebuild it.

1 Like

Yes both the engine and addon are external

Ah ok sorry I’m used to in-repo but should have clarified. You’ll need to be extra careful about versions then. If you are using versions for your engine dependency (e.g. in app package.json my-engine: '0.1.1' you’ll need to make sure you have a new version every time you are trying to “install” it in your app. If you are just pointing at a branch it will be slightly easier. I’d also give this section of the engine docs a read. The gist is that your engine and host app should always be using the same version of your shared addon (and any other dependencies they share).

1 Like

Thankyou @dknutsen, I got it.

Awesome! Glad you got it working. It can be kind of a pain to set this stuff up but hopefully it will be smoother sailing once it’s configured and you have a good development workflow.

1 Like

I have one more query. Can you please help me with that? @dknutsen