ember.jsember-addon

Triggering live-reloading when developing an Ember addon


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.


Solution

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