Series: Making ember-cli Addons

Creating An Addon

Published on Mar 23, 2016

Ember Addons aren't just for fancy people- they're for anyone who works in two or more Ember projects or has ideas they want to share with others.

This video shows how to generate an addon and test it on your local app before you push it up to npm.


Links

Code

Generate an addon:

ember addon blink-tag
cd blink-tag

In the generated package.json:

{
  "name": "blink-tag",
  "version": "0.0.0",
  //...
  "keywords": [
    "ember-addon"
  ]
  //...
}

The Blink component:

//blink-tag/app/components/blink-tag.js
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'h1',
  show: true,
  classNameBindings: ['show:ember:invisible'],
  didInsertElement: function() {
    var self = this;
    setInterval(function() {
      self.toggleProperty('show');
    }, 300);
  }
});

Link via local npm: Add "blink-tag": "*" to your package.json, then do the following in the command line:

cd blink-tag
npm link
cd ../app-using-the-addon
npm link blink-tag
npm install

Transcript

So you’ve probably heard about addons. You’ve used a lot of addons. You may even note there’s over 2000 addons. But you might still think that creating addons is just something for other people to do, fancier people. But if you’re working on more than one Ember app and you want to share code between them, then Ember addons are for you, and in this episode we’re going to show you how to make them.

So first let’s take a look at the thing we’re wanting to share. Well, we made a pretty sweet component called blink-tag, and you just surround your text with blink-tag and you get a blinking header, just how the web was meant to be.

And you’re probably curious about the code. The code isn’t really that important, but here it is, and shout-out to Gavin Joyce who originally wrote this about three years ago.

So our first step will be creating the addon itself. So we just type in ember addon and then the name that we want to give the addon. And then we cd into the folder.

So in this project, there are a couple of things to notice. First in the package.json, it’s given it a name of blink-tag and a version of 0.0.0. We’ll update that when we publish in the next episode. Then in the keywords, it has ember-addon. You can add more keywords for metadata, but ember-addon is what tells Ember and npm that is an addon, so keep that.

Now for the heart of the addon. We’re going to copy all of this, and then we’re going to delete this so that we no longer have it on our web application. We’re only going to have it on our addon. And we’ll go into app, we’ll create the components folder, and then create the blink-tag file and paste our code in there.

So we have our blink-tag in our app folder, and anything in the app folder will be inserted directly into our app. So once we’ve got this addon linked up, we’ll be able to just use the blink-tag. But how do we link it? Well, in the next episode we’re going to go over more permanent ways, but while you’re working on something, you can just use npm link.

Alright, so after you used npm link in your addon folder, you go to your Ember folder, and you say npm link, then the name of the addon. And once you’ve done that, then you can go into your package.json and link it up like that. And finally, you npm install. So then when you start your Ember app, you’ll now have your blink-tag even though you don’t have it in your local components. Instead of being stored in the local components, it’s in your node_modules folder, and it’s styled differently because it’s linked instead of being copied over from the npm repository.

So that’s the basics of our first Ember addon. Join us in the next episode when we discover how to publish that addon both to GitHub and to npm, so we’ll go over two of the most common methods of publishing. And then in future episodes, we’ll go about improving this addon and making it more extensible. I’ll see you next time.

Making ember-cli Addons

Subscribe to our mailing list