0

I'm developing a private Ember addon for my team that will contain a few branded UI components that we will reuse in a bunch of different apps, such as a <BrandHeader /> and <BrandFooter />.

Is there an standard for creating a development environment that allows you to get live-reloading previews of your components as you build them? If there's not a standard, does anyone have a workflow that you've created that works well for you?

I tried using the strategy of creating an addon with the ember-cli ember addon <name> and then npm linking to an Ember app where I call the components, but with that method I need to rebuild the ember app every time I make a change in to the addon.

Forrest Deters
  • 11
  • 4
  • Hello, welcome! Yes this is supposed to work, but I think may need some config first (we don't want to always watch deps, or we'd have performance regressions!!) -- what versions of ember-cli, ember-source, and ember-auto-import are you using? also, are you using embroider? – NullVoxPopuli Jul 13 '23 at 19:32
  • 1
    @NullVoxPopuli I'm using ember-cli 5.1.0, ember-source 5.1.1, and ember-auto-import 2.6.3 in the addon project. In the app I was trying to link into, it's ember-cli 4.12.1, ember-source 4.12.0, and ember-auto-import 2.6.3. I'm not using Embroider in either project. Also, I found out about the `test/dummy` app (see my self-answer), which is fine for my needs right now, but I can see the `npm link` strategy being useful in the future too, so I'd love to hear your advice still! – Forrest Deters Jul 13 '23 at 19:49
  • Thank for providing all that info! glad you found a way to proceed! (and that you're using such new versions!! ) but yeah, test/dummy is a good spot to put tests / demos / etc. I just posted an answer which you may or may not find useful that has the details that you may end up needing later. – NullVoxPopuli Jul 13 '23 at 20:04

2 Answers2

1

I couldn't find a place in the Ember documentation where this is clearly explained, but I found the answer:

The ember addon <name> command automatically creates a "dummy" app in the tests/dummy directory. You can use your addon components in this app with no special configuration. In the example below, I've just added the line where you see the <BrandHeader> component being called.

// tests/dummy/templates/application.hbs

{{page-title "Dummy"}}

<BrandHeader>Header text</BrandHeader>
<h2 id="title">Welcome to Ember</h2>

{{outlet}}

Running ember serve in the root folder of your project will start a development server like in a normal Ember app, serving the dummy app. Changes to components will live-update.

Forrest Deters
  • 11
  • 4
0

There are a couple things you'll want to look at to make sure that live-reload works between npm/yarn/pnpm link between projects:

In the v1 addon's <project-root>/index.js, you'll want to temporarily set isDevelopingAddon

module.exports = {
  name: require('./package').name,

  isDevelopingAddon: () => true,
}

if you have Watchman installed, you may be able to skip this step.

Next, in your app that you linked to, you may need to set autoImport.watchDependencies in your ember-cli-build.js, like this:

// In your ember-cli-build.js file
let app = new EmberApp(defaults, {
  autoImport: {
    watchDependencies: [
      // trigger rebuilds if "some-lib" changes during development
      'some-lib',
      // trigger rebuilds if "some-lib"'s inner dependency "other-lib" changes
      ['some-lib', 'other-lib'],
      // trigger rebuilds if any of your dependencies change during development
      ...Object.keys(require('./package').dependencies || {}),
    ],
  },
});

Under embroider, I believe all this watching happens automatically.

NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352
  • Just noting in case anyone comes across this in the future while developing a v2 addon: After porting this addon to v2, I had to set `autoImport.watchDependencies` according to @NullVoxPopuli 's suggestion to get my test-app to observe changes to the addon – Forrest Deters Jul 28 '23 at 22:36