Open source is an absolutely amazing concept. Brilliant developers write code to do all sorts of interesting and useful things, and then anyone can use that code and write even more code on top of it themselves. That is very, very cool. Each time I pull in open source packages to build a new project I realize I'm standing on the shoulders of giants.
If you'd like to contribute code to the open source ecosystem and this is your first time, this is the article for you! In the following paragraphs I'll go through creating an npm package from an empty directory to a published package step by step.
Before we get started, I have to plug Flossbank. Flossbank is a package manager wrapper that compensates the authors and maintainers of the open source packages you install, as you install them. The compensation comes from either monthly donations or ad revenue, whichever you opt-in to. Check it out at https://flossbank.com. It's a must if you use npm or yarn. **Full disclosure: I started Flossbank.
Also quick note: I'm working on a Mac and will be using npm to publish the open source package.
Alright, let's jump in. First, in a new directory run npm init to create a new npm package. When we run npm init, we're really just following npm's CLI through a step by step to fill out our package.json and create a package on our local machine (don't worry, your package can't be seen by anyone until you run npm publish later in this tutorial). A package.json is a blueprint to your project. It outlines the dependencies your project needs, the scripts you can run, the name of the package, the version, and much much more. Once you've gone through the command line instructions prompted from running npm init, if you run ls you should just notice an added package.json file that wasn't there before. Go ahead and cat package.json to see what was created for you!
And just like that, we have an open source package! The package is empty, but none the less, we have a package!
Open source is built on the philosophy that open source software begets technological progress, and any code helps. What this means in practice is, don't be shy to publish a package you think might be too small! There are popular open source packages that literally just return whether a number is even or not. Yes, that's it. And it's still useful to people who don't want to write that code in a bunch of places and run the risk of making a typo! So don't ever be worried your open source package isn't enough. I promise, it is.
Now it's time to write some code. When we ran npm init, we likely chose the default "entry point" to be index.js. If that's the case, then go ahead and create a new file named index.js, or create a file of whatever name you chose as the "entry point". If you don't remember, you can always pop open your package.json and look at the key main, and see what file is listed as its value.
I just created my index.js and plopped in a little algorithm for sorting numerical data that has labels in a kind of double sort. First, it sorts by count so that the items with the highest count come first. Then it sorts alphabetically by name but only if the numerical values are the same. I find this useful when I'm dealing with data I'm going to graph and I want to sort by count and then have the data sorted by name if the counts are the same.
See the code I created here.
Once you write the code, it's recommended to store your code in some version control host. This is so others can learn from your code, copy, paste, etc if they so choose! I chose GitHub, but GitLab and BitBucket are also great choices.
To publish your npm package, simply run npm publish. You'll see some output about packing the package contents into a tarball, and after a few seconds you should see output that your package was published with version 1.0.0!
Now you can navigate to your npmjs account and you'll see your new package! It's worth noting that your README.md is very important with open source packages. This is how people see value in your package! The better the README, the more enticing your project is!
Congratulations on publishing your first open source package! You've contributed to technological progress! It might not seem like much, but even if you save your fellow developer 5 minutes of coding, those 5 minutes spread across the vast open source ecosystem add up and allow engineers to create insanely cool projects in little to no time!
Leave a comment with your first open source package, and dev on, friends!
Top comments (0)