Ember 2.x Ember 2.x

Publishing an Add-on to NPM

Check out a free preview of the full Ember 2.x course:
The "Publishing an Add-on to NPM" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Now that Mike has created an Ember add-on he demonstrates how to publish it to the NPM repository. This would allow the add-on to be widely distributed and used across many applications.

Get Unlimited Access Now

Transcript from the "Publishing an Add-on to NPM" Lesson

>> [MUSIC]

>> Mike: So we have a component here. I'm actually going to publish it to npm just for kicks. Cuz this is awesome, we have to share this with the world. [LAUGH] And I'm gonna rename it so that joke. [LAUGH] So that I don't step on someone's useful namespace that-

>> Speaker 2: Couldn't you just do like a symlink to do that? To share in class, maybe just like a symlink?
>> Mike: So I could do that, but that's not the way you guys are typically gonna consume addons. I can do an npm link and explicitly run an installation blueprint or whatever.

[00:00:43] But that's not really what's gonna happen. So I'm gonna take advantage of this because I'm actually gonna publish it, and we're gonna do an installation blueprint here. So the concept of an installation blueprint is post-install setup functionality. So when you run Ember install, npm install is basically the first thing that happens.

[00:01:09] And then the consuming app looks into the addon and runs a particular blueprint. And the blueprint it will run is a blueprint whose name matches the addon's name. So we can generate a blueprint that does this.
>> Mike: So we have a blueprint now. We can go and see it right here.

>> Speaker 2: Now you made that up, does it need to match the name in the package JSON?
>> Mike: It needs to match the name, good question, it needs to match the name in this index.js file. So and this is, if you are really interested in developing addons, there is nothing I can cram into an hour that would get you to the point you need to get to.

[00:02:04] But here's the short answer, this is Ember's understanding of the name of this thing. Package.json, this is the the npm package, where this can be found.
>> Mike: So in this blueprint, I'm gonna fill in this after install hook, and I'm going to do,
>> Mike: We'll add underscore,
>> Mike: And,

>> Mike: So that's not gonna help us here.
>> Mike: All right, so we'll pick a random version here, 1.7, perfect.
>> Mike: And we can actually run this, so I'm gonna make a commit just so we have a clean situation.
>> Mike: We can run the blueprint itself within this addon just to see kind of what it does, ember g fem.

[00:03:34] And then we have to sort of pass a name in just because by default, blueprints need a name, because usually, you're generating an object, right? In this case, it's sort of ignored. Looks like I forgot a comma or something. I'm getting overzealous with ES6 and Node.js code.
>> Mike: Undefined is not a function.

>> Mike: Sorry.
>> Mike: All right, so what just happened was, here's my stupid little build fix.
>> Mike: Underscore should have been added to package.json, let's see.
>> Mike: All right, well, let's push it anyway and see if this works.
>> Mike: Perfect. [LAUGH] Awesome. This is gonna be a really popular addon.

>> Mike: All right, so this is our GitHub app.
>> Mike: All right, so, hm, our post in cell didn't seem to work there. addBower, I know what the problem is.
>> Mike: Shoot.
>> Mike: All right, my mistake here. So addBower to packaged project returns a promise, after install is promise-aware, and so effectively what happens now when we run this, if I republish it.

>> Mike: When we install this addon, it will then, as a post install step, install this bower package into the consuming app.
>> Mike: It's possible that it's cuz it's already installed, let's see.
>> Mike: Hm, one more thing to check here.
>> Mike: So that's in my package JSON, except it's not.

>> Mike: I'm making this seem way more difficult than it is.
>> Mike: We'll do this.
>> Mike: All right.
>> Speaker 2: You've got your first consumer.
>> Mike: Finally, okay, so there it is. Underscore was added and the best thing to do to learn what these blueprints are capable of is to go and look at some of the more popular Ember addons.

[00:08:01] Look in the blueprints folder. Remember that the name of the blueprint that matches the name of the addon, that is what will be run automatically on Ember install. You can install other addons, and their blueprints will be run. You can add npm packages, add bower packages, and additionally, you can have in your blueprint if you have a folder called, I believe, files.

>> Mike: Anything inside this,
>> Mike: Will be added to the structure of your, it'll be a file that's added to the consuming project. And if it's a file that already exists, that's where we were getting sort of that git diff with the option to replace or see the diff or reject.

[00:08:57] And so if you need to make a configuration change, for example, or if you need to add an initializer or change the way the application starts up, or set a default somewhere in some files that already exist, the default blueprint is where to do that.
>> Speaker 2: It's the same as if you made a blueprint, and your blueprints overlap your application so.

>> Mike: Precisely, and just that the special one is the one with the same name as your app.
>> Mike: So this is a really like surface level Ember addon demo here. Definitely check out emberaddons.com and emberobserver.com. There is some good scoring methodology that has to do with how popular it is on GitHub, how many downloads per month it has, whether there's good test coverage, how many contributors there are.

[00:09:55] So there's a real effort to surface to Ember developers which ones are really solid versus which ones were created hastily during a demo and [LAUGH] possibly have some weird behavior.