How to Create an npm Package Ready to Distribute From Scratch

Overview

Node Package Manager (npm) is a Javascript package manager for managing package dependencies. With npm, we can also create packages that contains useful code, which can be shared with/reused by others. In this article we show you how to use npm to create a Javascript package and publish it to the public npm registry to share it with the world.

The step-by-step overview to create an npm package and distribute it:

1. Decide on package name and confirm that it is unique in public npm registry
2. Install Node.js (and npm)
3. Create a directory for your npm package and work from within it
4. Run `npm init` to create 'package.json'
5. Add package dependencies (if any) to 'package.json'
6. Add your Javascript code
7. Run `npm login` to login to npm registry (create an account if you don't have one)
8. Run `npm publish` to share your package with the world
9. Configure `npm` to publish to a private repository (if desired)

Why Create an NPM Package?

Using npm, developers can create a package of code and share them with other developers. Developers use packages so they do not have to reinvent the wheel, i.e., re-create code that has been created by others, and keep their code DRY (Don't Repeat Yourself), i.e., minimize code repetition by referring to the reusable code within the package instead of cut-and-pasting the same code all over the codebase. A package also helps with code versioning, each package can be tagged with a version so that developers can choose a version that is compatible with their codebase.

               

Packagecloud is a package registry that can simplify deploying packages. By hosting all of your packages in one place, you can easily manage, update, and share them across the team. Check out our 14-day trial to get your packages set up quickly.

      

What Is A Package Manager?

Node Package Manager (npm) is a package manager that allows you to download, install, update, and manage npm packages, and their dependencies.

       

Dependency refers to the files and components used by each of the other ones to create an application, widget, or product. These dependencies can be seen as different levels, such as:

• "dependencies on tools" level, where one would list all the programming languages and libraries needed for building code
• "dependency on individual modules" level, which lists out every module referenced by another module in use; or even at lower levels like listing all source file dependencies

         

How To Create an npm Package From Scratch

Now that you have a basic understanding of package managers, let's get started! 

Step 1 - Decide on a package name and check its availability

Decide on your package name and check its availability in the public npm registry using the search tool.

    

Step 2 - Install Node.js (and npm)

Node.js is a platform for building scalable network applications. It's completely free and can be used for both server-side and browser-based applications. To create an npm package you need to have Node and npm installed on your system. If you do not have them, you can download Node, which contains npm from the official website.

    

Step 3 - Create a new directory for your project

The next step is to create a directory to house your package and do everything within this directory.

Step 4 - Run `npm init` to create 'package.json'

`npm init` will prompt you for information about your package; the only compulsory information is the package name, but adding keywords (to enable people to search for your package) and author is recommended, and you can accept default values for the rest. It will then generate the package skeleton, which includes the all-important package.json file. Alternatively you can also just create package.json file and populating it manually with the same information in the json format below.

{ "name": "", "version": "", "author": "", "private": true, "dependencies": { }, "scripts": { }, "meta": { } }

   

Step 5 - Add dependencies (if any) to 'package.json'

Now that you have your package.json file setup, you need to add the dependencies that your package requires.

To add a package, simply add a line to the dependencies section of your 'package.json' file that looks like this:

"dependencies": { "package-name": "1.0.0" }

   

When you're adding a new package to the project, remember to add it to the dependencies section of your 'package.json' file.

    

Step 6 - Add your Javascript code

The first thing you'll probably want to do is add code with a function that prints "hello world" to your package in a file called 'index.js'.

// index.js

function helloWorld() {
  return "hello world"
}

module.exports = helloWorld

Step 7 - `npm login` to login to npm public registry

Sign up for an account on the npm public registry, if you have not.

Use `npm login` to login to the npm public registry (you will be prompted for your password)

Step 8 - `npm publish` to share your npm package with the world

To publish you npm package, simply do:

npm publish

This will publish your package to the public npm registry, and make it available to other developers.

Step 9 - Configure npm to publish to private npm registry (if desired)

If your npm package is only for internal use, you may want to publish it to a private npm registry like Packagecloud. To do so is equally simple.

a. Sign up for an account at  Packagecloud. Note the Packagecloud username you registered (PACKAGECLOUD_USERNAME)

b. Follow the guided onboarding flow to create a repository. Note the Packagecloud repository name you created (PACKAGECLOUD_REPONAME)

c. Configure your npm to work with Packagecloud, by running:

https://packagecloud.io/PACKAGECLOUD_USERNAME/PACKAGECLOUD_REPONAME/npm/

d. `npm login` (with your Packagecloud credentials)

e. `npm publish` (this publishes to your Packagecloud repository instead of npm public registry)

   

Packagecloud is a package registry that can simplify deploying packages. By hosting all of your packages in one place, you can easily manage, update, and share them across the team. Check out our 14-day trial to get your packages set up quickly.

      

Different ways to create an npm package

There are different methods to write an npm package besides writing a script. The most common method is to use software tools and plugins to build packages based on templates.

     

Yeoman

Yeoman is a Node.js-based open source project and may be used as an alternative to Grunt or Gulp in the frontend world. It offers scaffolding tools, generating projects using diverse templates written with JavaScript (node). You can use the generator to scaffold a basic npm package for your project. Once you've created the package and Yeoman is set up, you can simply hit the publish button in the generator and your package will be live on npm. This is a great way to get started with npm if you're new to the process or simply want a quick way to get up and running with your package.

    

Using Webpack and Babel

Webpack is a great way to compile your JavaScript and CSS files into one single bundle. It's also much more powerful when it comes to bundling and processing assets, thanks to its ability to utilize plugins. Several plugins are available for use with Webpack, but the most popular is probably Babel. Babel provides support for transpiling JavaScript code into ES2015 (ES6), which is the new syntax being adopted by modern browsers. If you're using ES6 in your project, you can use Babel to transpile all of your code at once. 

         

How Packagecloud Can Help With npm Packages

Packagecloud is a cloud-based service that enables companies to create an internal enterprise registry for their software artifacts. Rather than using public repositories, you can easily make sure you always pull packages from a controlled environment. 

                

Check out the Packagecloud 14-day trial to see how easy it is to distribute packages throughout your entire organization. Never worry about the scaling, consistency, or security of your packages again.