The Node Package Manager (npm) is a ubiquitous system used in front-end development for sharing and managing useful bits of code between developers and projects. Node packages are published on a central and public directory maintained by npm.
What’s especially wonderful about npm is that it will assist in managing not only updates to modules used in projects, it handles the dependency chain for modules within your project. For example, if I’m using the node-sass package in my project and save it as a dependency, npm will also install and update the node-sass dependencies. This makes updating and managing projects with lots of dependencies a breeze.
I recently went through the package publication process when I decided to publish a package, Bootstrap Nucleus. I found myself using the Bootstrap grid and utilities for many different projects, but ended up either ditching the majority of the components or overwriting most of their properties. I don’t want to include the entire Bootstrap framework if I’m not going to use it, so I opted for creating a custom build of the Bootstrap framework with only the features that I find essential and foundational.
Thankfully, npm packages can be used for CSS libraries, too. Instead of manually copying over the Bootstrap files between projects, I decided to leverage the power of npm to create a central store, or package, for these files. This approach has several benefits:
- The package files can easily be updated
- Updates can be pushed to all projects that use the package
- I can share the functionality of this package with others
Prerequisites for Publishing
Node .js and npm
First, we’ll need to make sure that we have node.js and npm installed. Luckily, npm comes bundled with node.js, so there’s a good chance that if you’ve got node.js installed then you’ve also got npm installed. We can check to make sure that we have both installed by checking the version on the command line with
node -v and
These should each return a version. If you don’t have them installed, head over to npm’s installation guide.
You’ll also need to create a free npm account if you don’t already have one. Alternatively, you can create an account from the command line using
After ensuring that you have an npm account, you can login using
You can also double-check to make sure that you’re logged in with
Now that you’re logged in, you’ll be able to publish a package using your account.
Creating your Package
Creating a package is a simple process that starts with the creation of a
package.json file within your project directory that contains project information, such as package name, description, version number, etc.
Luckily, npm comes with a simple script that will generate a
package.json file for you and allow you to provide some basic inputs. Initialize your package using
npm init. The only required fields for publishing your package are
version, but it certainly doesn’t hurt to provide additional information.
Note that when naming your package, you’ll want to ensure that a package with the same name doesn’t already exist.
Publishing your Package
Publishing your package to the npm directory is a simple as running
npm publish. Seriously, this is the easiest part of the whole process. The actual work is in creating your package’s functionality and maintaining it.
Be sure to include a README.md file with instructions or usage information so that others can easily understand your package’s functionality and features.
Testing your Package
After publishing your package, you can test an installation in a project to ensure that it works.
mkdir npm-test && cd npm-test && npm init -y
npm init -y will automatically initialize a
package.json file with default values. This is handy for quick tests.
Now, install your published package using
npm install my-package where
my-package is the name your package. You should now see your package in the
node_modules directory at your project root.
Updating your Package with Versioning
Npm uses semantic versioning for managing updates to packages. There’s quite a bit of nuance to semantic versioning, but the basic principle is that a version number follows a standard numbering convention, which indicates major, minor and patch versions
- Major - is the first number and indicates an API change that makes the new version incompatible with previous versions. Major releases should be used when an update is required for functionality.
- Minor - is the second number and indicates a feature update that is backwards-compatible.
- Patch - is the last number and indicates a backwards-compatible update for bug fixes.
For a deep dive into semantic versioning visit the semantic versioning specification at semver.org.
npm includes a handy way to update packages consistently with a semantic versioning command,
npm version. The command requires a
--version-name argument, which can be
For example, if you used the default value in the
npm init process, your package version will be
1.0.0. Running the following command will increment the version number to
npm version patch
After updating the package with the version command, npm will increment the package version number and write this new version to your
package.json. You can now push your updated package to the npm registry once more with the
npm publish command.
The official npm documentation is robust and quite accessible. It’s useful if you intend to author packages, or even if you only ever intend to consume packages. Additionally, you can explore the wide world of published packages at npm’s online registry of packages. There’s a wealth of incredibly useful packages to choose from.
Did you publish a package or have an idea for a package you’d like to publish? If so, be sure to let me know.