A guide to creating npm packages for Meteor Developers


So you’re coding away, building the next Pokémon GO app, when suddenly you realize that some of the functionality you’re building NEEDS to be shared with the world. You used to just throw it in an Atmosphere package, but this code is far too important for that. This code needs to be shared with the entire JS community. This needs to be … an npm package.

ES2015

You’re writing your code in ES2015 (you are right?) but not all versions of npm can handle it. That’s where Babel comes in - essentially it takes your sweet ES2015 code and makes it less sweet.

Boilerplate

At OK GROW! we use a slightly modified version of some boilerplate that our good friend Arunoda created. It is specifically geared towards Meteor devs and is a great way to get started when writing your npm packages. Clone the repo to somewhere outside of your current project and give it an awesome npm friendly name.

git clone https://github.com/okgrow/npm-base.git awesome-package
cd awesome-package
npm install

Git

Now is a great time to make your initial commit. Create a new repo on GitHub with the same name as your awesome package. Next you’ll need to change the remote origin in your repo to match.

git remote remove origin
git remote add origin https://github.com/jamielob/awesome-package.git

You can check that your remote origin has been set up correctly using git remote -v.

Now you can make the commit and push it up to remote.

git add .
git commit -m "Initial Commit"
git push origin master

Refresh the repo page on github.com to check it’s pushed correctly.

package.json

Open up package.json in your favorite editor. We don’t have to change much in here, but you should edit name, description and repository url. It’s also a good idea to change version to something lower than 1.0.0 until your package is stable.

README.md

Edit the README.md and give your awesome package and awesome description. Writing a good outline of how your package will work now will give you a great guide to work from. You can come back to this later and add all the really meaty stuff.

While you develop your package you don’t want to bother with publishing it, so for now we’ll just make sure that our local app can use it. You can use the pwd command in your package directory to get the full path to the current folder. Copy this path, open up a new terminal tab, and navigate to your app folder. You can now use the npm link command to add a symlink directly to your package. This means that every time you make a update to the package, it’ll be pulled into your app automatically.

npm link /path/to/awesome-package

Writing your package

Now it comes down to the nitty gritty! All of your package code should be written in the /src directory. But before you begin, we need to fire up the Babel transpiler using babel src -d dist --watch. We’ve added a handy script to the boilerplate to take care of this, so all your need to do is:

npm start

Now every time you make a change to your ES2015 source files, it’ll automatically create a backwards compatible version of your code in the /dist folder.

Be patient when checking your app to see changes, between Babel, npm link and the Meteor build system, it can take some time for your app to refresh.

Using your package

When writing your package you should export your functions and variables using the ES2015 syntax:

export const isAwesome = () => {
  console.log('Running isAwesome!);
  return true;
}

In your app, you’ll then be able to import them and use them wherever you like:

import { isAwesome } from 'awesome-package`

if (isAwesome()) {
  console.log('This is awesome!);
}

Publishing to npm

There’s a great video in the npm docs on how to publish your shiny new package to the world!

Acknowledgements

Thanks to Arunoda for his original blog post and package that inspired both this guide and the boilerplate code.

Let's stay connected. Join our monthly newsletter to receive updates on events, training, and helpful articles from our team.