DEV Community

Cover image for Publishing my first NPM package only took 3 steps
Robin Goudeketting
Robin Goudeketting

Posted on

Publishing my first NPM package only took 3 steps

Check it out! ~ TL;DR at the End
NPM ~ Github ~ Docs

Learning to code

When I started programming at the beginning of this, I had no clue how much I would like it. Starting at Codaisseur Academy I learned the basics and after 8 weeks and 50 hours of coding and hands on work per day, I officially graduated and was able to make full-stack applications.

I learned how to use NPM and use packages in the Node.js back-end applications as well as importing them into the front-end React.js applications. However, never was I told how to make and publish packages of my own. It seemed so daunting in the beginning. What do you make? How do you publish? Version control? Testing? CI? Where would you start? Then I saw this comic:

Bunny and a fox trying to start a garden and the fox realises in the end that starting is the first thing to do.

Starting the project

So a short while ago I decided to just start with making something. I picked something I encountered in my job, where we use Ruby. In Ruby there are methods, called inflections, that convert strings into (sort of) formatted strings. One of those is called titleize, which converts a string into something that represents a title. I decided to make that as a package for NPM.

I created a folder, initialised NPM, and created a file that held my function. Then there are a few things to note:

  1. Set the "main" key in your package.json to the file that holds your function, like this:
{ 
  ...,
  "main": "./titleize.js", // or something more generic like "./index.js"
  ...,
}
Enter fullscreen mode Exit fullscreen mode
  1. Make an account on NPM. This can be done via their website, but is also easily done via the NPM cli. You can run npm adduser and it will guide you through the creation of a user. When you're done, running npm whoami should tell you your username:
    Response from running the command npm whoami will tell you the currently logged in user.

  2. Almost ready to publish your package. First we have to check if our package name is not taken by someone else, otherwise you might get stuck. My terminal started asking for a One-Time Password. Turned out, the name of my project already existed and probably I was trying to publish to that package. If you cannot find a package with the name you chose, you should be good to run npm publish.

  3. Only thing that's left to do is installing your package into a different project. Just run

npm i titleizejs 
Enter fullscreen mode Exit fullscreen mode

Or whatever you called your package and import it into your files!

I also then added some Mocha/Chai test and hooked it up to Github Actions for automated testing. Also I hooked it up to Github Pages to generate a nice website for the docs. I might write about how that works if you are interested.

TL;DR

Publishing a package is super easy:

  • Create your package: run npm init and create you files.
  • Create an NPM account: run npm adduser (or npm login).
  • Publish your package: run npm publish.
  • Check out Titleize JS: run npm i titleizejs

Top comments (0)