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 link
ing 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.
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.