If you've been writing components for ember.js, you've no doubt come up against the distribution problem at one point or another. Say your team builds a few of these and you decide it's a good idea to share them across the organization ... but you don't know the best way to make them "npm" or "bower" install friendly? And what about using components in your ES6 ember apps? Never fear, ember-cli is here!
If you haven't yet looked at this fantastic build tool, treat yourself by looking over the website quick! Also be sure to thank Stefan Penner for all his hard work bringing this project from proof of concept to something I now consider the heart of ember development vNext! Without it you'd still be arguing over build tools (remember those *fun* grunt and gulp files we had to maintain for each project?)
So now we have this great build tool ... but what about the next iteration of package management for the web? Look no further because ember-cli has finally delivered on the promise of "install package/component/whatever the kids are calling these things now" and instantly use it! Gone are the days when you'd download it, fight with Ryan Florence on twitter for 2 hours about why his (current) view on modules is incorrect (again) / decide to wrap the downloaded module in a custom (hand rolled) named AMD module because the maintainer thinks everyone should use CJS and won't acknowledge your pull request / add it to your gulp/grunt/browserify build and finally ... use it.
To show just how easy it is to write and consume these "addons", I decided to throw together a quick 6 step guide (that hopefully complements the documentation).
The tutorial below shows the exact steps/ source code I used to write my first little component named ember-cli-wat
Step 1/2/3
npm install ember-cli
ember addon ember-cli-wat
cd ember-cli-wat
Step 4
vim addon/components/ember-cli-wat.js
This file will contain the actual ember component javascript. If you want to do something custom in the insert/destory methods ... or bind the keyUp event, that code goes here.
Step 5
vim app/templates/components/ember-cli-wat.hbs
Next we need to add the html for this new component.
Step 6
vim app/components/ember-cli-wat.js
Now because we want this component to be available for use directly after the install, we add one more file to the app directory that will import it.
How to use this in your ember app
First we need to make the component above install friendly using npm. Open the package.json and give it a unique name/version/etc if you haven't already. Next do "npm publish" (or npm link if you don't want this in the registry). When this is complete you should be able to "npm install the-component-you-just-created".
Assuming the new addon is public or linked, do the following inside your ember app to register it with ember-cli.
npm install --save-dev ember-cli-wat **save-dev is very critical here
Now to use this component in your project open the application.hbs/application.handlebars file and insert the following.
To see it in action, fire up "ember server" from the command line. You should see a text area (or whatever component you added). If you end up with an error saying it can't find your template verify the addon is listed in your ember apps package.json file (took me a while to understand this is how the registry worked so I hope this post can help others avoid my mistake).
