How to Publish a Package to NPM

You have written your code and it’s ready to publish to the world, but how do you do it? I had this exact question a few weeks ago. In this article, I have described the steps I followed to publish a package. Let’s get straight to it...

Date

Written By

How to Publish a Package to NPM

I made a plugin for tailwind, let’s publish it to the Node Package Manager (NPM) registry now.

Sign up and Login in NPM#

# Check if node and npm is installed
node -v
npm -v
  • Login to NPM in your terminal by using npm login command

Publish to Git#

For public packages, you should publish the package to GitHub or other git clients. This makes sure your package users can browse through all the code files without installing the package.

git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/praveenjuge/tailwindcss-brand-colors
git push -u origin master

Prepare Package#

  • Initialize package.json file by doing npm init --yes.

  • Open package.json file and update the following:
  • Make sure you have the correct package name "name": "tailwindcss-brand-colors",
  • Follow semver versioning in "version": "0.1.0",
  • Select main entry point to your package in "main": "index.js",
  • Select License in "license": "MIT",
  • Select files to publish
"files": [
  "src",
  "dist",
  "index.js"
],

This is enough to publish your package to NPM.

Test Locally#

You can test your package locally before publishing it to NPM. Create a new folder, initialize npm and install your package to test it.

npm install -S ./path/to/your/package

This will install your package from your local folder and you can test if everything works correctly before publishing. You can also do this before releasing new versions to test your packages.

npm publish#

If everything is done you can publish the first version by doing npm publish. If there are any errors, the Command Line Interface (cli) gives you all the information you need to fix it.

npm publish

You can now see your package in your account on npmjs account. Check out the package we published now here: https://www.npmjs.com/package/tailwindcss-brand-colors

release-it#

release-it is a cli tool to automate versioning and package publishing-related tasks.

It can,

  • Bump version (in e.g. package.json)
  • Git commit, tag, push
  • Create release at GitHub or GitLab
  • Generate changelog
  • Publish to npm

You can use it for future release for automating your releases.


Now, start building some new package that you always wanted to see and remember, “Idle hands build nothing.”

Up next

Rise of Tailwind - A Utility-First CSS Framework

Subscribe to Sudo vs Root

Our newsletter rolls out every month. No fluff. Pure content.

Skcript https://www.skcript.com/svr/how-to-publish-a-package-to-npm/ https://www.skcript.com/svrmedia/heroes/how-to-publish-a-package-to-npm.png

We collaborate with ambitious brands and people.

Get free consulting →