Triggering live-reloading when developing an Ember addon

Question

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.

Answer 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.

Answer 2

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.