Series: Making ember-cli Addons

Publishing an Addon

Published on Mar 25, 2016

Addons don't do much good if they're stuck on your computer.

This video shows how to share your addon- both via github and via npm. With github we see how to tag commits and use those while sharing the app, and in npm we'll see how to register to allow our addons to be hosted.


Links

Code

Include in package.json from github:

{
  "devDependenecies": {
    "example": "git+url.git",
    "blink-tag": "git+https://github.com/jeffreybiles/blink-tag.git",
    "versioned-example": "git+url.git#v1.0.0-beta.7"
  }
}  

Push up a new version:

git tag v0.0.1
git push --tags

Publish on npm (after you already have an npm account):

npm adduser
npm publish

Transcript

In the last episode, we’ve created an addon that contained a component, in this case the blink-tag, and then we linked it up using npm. However, sometimes you want to be able to share your addons with more than just your own computer, and we’re going to look into two ways to do that.

First, we’re going to do it with github. So we’ll make a new repository called blink-tag. It’ll be a public one. And then we’ll go ahead and push the existing repository up there.

So one thing you may note at this time is that we actually haven’t done any gitcommits yet because our npm link has picked up the current state of the addon at all times. So now we’ll have to add stuff to git and make it commit, and then we’ll push those changes up so they’re available to our other apps.

Alright, now let’s actually put it in our other apps. We’ll start by grabbing this url, and we’re going to use this url in addition to a couple additions to put it into another app. This is the app that we were working on a couple of videos ago.

Alright, so we’ll go in here and we’ll once again add blink-tag, and now do git+, then the url, the main url, and then .git. And now when we npm install, it will install our blink-tag from github. In this case, because we didn’t specify anything different, it’s going to be taking it from the master branch of the github repository. But if we wanted to, we could add a specific branch or version to the end of this.

So now that it’s installed, let’s go ahead and do a quick demonstration to make sure it’s in there. So we’ll add a blink-tag around the name of the monster here. And it is indeed working, and it changed the styling a bit. We’ll deal with that in the next episode when we talk about making the tag more extensible.

So it’s working. We’re sharing across repositories, and this could be shared across computers. But what if we want to make it easier on other people and we want them to be able to access it through npm directly instead of going through github? Well, that’s fairly easy to do, and we’ll show you how now.

Before we do that, it’s good form to give our package a version, so 0.0.1 in this case. And it’s also nice of us if we go ahead and... first we’ll commit that, and then we’ll tag it with version 0.0.1, and we git push tags. So that way people who are accessing it via github can use the same versions that the people from npm are using. Then we’ll just type npm publish, and it looks like we need to authorize. So let’s go ahead and do that.

First, we’ll need to sign up. And then on the command line, we use npm adduser. And now we’re authorized. So now we’ll be able to use npm publish with these, and it should keep us authorized between uses.

So now we can go back to our package.json and we can either put in * to get any version, or 0.0.1. We’ll go ahead and reinstall in order to get the new version, and we’ll reload to show that it’s still working.

So that’s publishing an addon. We showed you how to publish it on github and on npm. But if you’re wanting this to be a widely used community plugin, you’re not done yet. There are lots of things that you have to do to in order to make this a good experience for other people. And a good checklist to start out with is the Ember observer reviews, things like are there meaningful tests, is there a README, is there a continuous integration build. Things like that make it better for other people to use. And of course if you’re sharing it with anyone at all, maybe not the community at whole but maybe your coworkers, some of these are still important.

Alright, thanks for listening, and in the next episode we’ll go over how to make our addons more extensible, and that’ll help us fix this giant header problem. I’ll see you then.

Making ember-cli Addons

Subscribe to our mailing list