Create and publish your own package

This post will show you how you can wrap a 3rd party library into a Meteor package.

We’ll use the popular Skeleton responsive boilerplate in this example.

You can view the full source-Code here. Furthermore you can see all the commits here.

1. Setting up your project

At first we should start with an empty folder called username:skeleton (where username should be replaced with the username of your Meteor account).

2. Initialize a git repository

Next we’ll version control our package with git.
cd into the newly created folder, run

touch .gitignore<br />

to create an empty .gitignore-File. After that run

git init<br />
git add .<br />
git commit -am "Initial Commit"<br />

to initialize the git repository and create the initial commit for your package.

3. Update the .gitignore file

Let’s update the .gitignore file with information about what files / folders should be ignored by git.
A good starting point is this repository from GitHub where you’ll find a bunch of .gitignore files you can copy and paste for your project (e.g. you’ll also find a .gitignore file for Meteor).

4. Add the library

Git provides a very handy feature called submodules where we can kind of “embed” another repository into our current repository (which will make it easier to update the 3rd party library later on).
We’ll use submodules so that we can “load” the Skeleton repository into our package-Repository.
We’ll name the submodule “Skeleton” (which is the name of the official Skeleton repository).

5. The package.js-File

The next thing we need to do is to add the package.js-File so that Meteor knows how to deal with the package:

Package.describe({<br />
  name: 'pmuens:skeleton',<br />
  summary: 'Wraps the popular Skeleton responsive boilerplate into a meteor package.',<br />
  version: '0.1.0',<br />
  git: 'https://github.com/pmuens/skeleton.git'<br />
});<br />
Package.onUse(function(api) {<br />
  api.addFiles([<br />
    'Skeleton/css/normalize.css',<br />
    'Skeleton/css/skeleton.css'<br />
    ], ['client']);<br />
  });<br />

The package.js-File is very easy to understand. I’ll go through it so you can understand what’s going on here.

Package.describe() is a functionality where the basic information about the package is placed.
E.g. our package is called pmuens:skeleton and starts with version 0.1.0 (If you’re curious why we start with version 0.1.0 you should read this article by the awesome folks from MeteorHacks).

Note: It’s recommended to use the version of the library you wrap in your package for your package-Version so that one can see directly which version of the library is packaged.

package.onUse is used so that Meteor knows which dependencies and files are used in the package. Here We’ll just add the two Skeleton-Files (normalize.css and skeleton.css) from our git submodule and tell Meteor that those files are only needed on the client.

That’s it. Our package is done and can be used / added to Atmosphere.

6. Publishing the package

Finally we want other developers to use our package as well. The command

<br />
meteor create --package username:skeleton<br />

(replace username with the username of your Meteor account) will publish the package to the package-Servers and make it available to other developers.

An important note about repackaging 3rd party libraries

Please view this video before publishing your 3rd party library packages. Right now there are many duplicate packages on atmosphere which makes it hard to choose the next library for your project.

That’s all you need to do to wrap existing libraries into a package. Happy packaging!