Build and publish your first NPM package in 15 minutes.

4 min readJun 21, 2019

Let’s get started!

What is NPM?

NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and a list of public and private packages, called the npm registry.

Requirements

You will need to install npm and to create npm account.
Npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.
Download Node.js and npm here
You can create npm account here.

Steps to building a package

1.Create github repository

The package we will create is a unique id generator, so let’s create repository called uniqid, and add a description:

hit “submit repository” button, and repository is ready:

2.Initialize npm:

First create a folder with following command:
mkdir uniqid && cd uniqid

Then you can use npm init command to set up a new npm package. We will be asked a bunch of questions:

and the package.json file will be created for us. This is the only mandatory file for publishing the package on npm registry, so we could already publish our package. But we will add a few more files in the next step. Our package.json looks like this now:

{
  "name": "@mdenic/uniqid",
  "version": "1.0.0",
  "description": "A super simple unique id based on timestamp.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/markoDenic/uniqid.git"
  },
  "keywords": [
    "uniqid"
  ],
  "author": "Marko Denic",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/markoDenic/uniqid/issues"
  },
  "homepage": "https://github.com/markoDenic/uniqid#readme"
}

3.Add package files:

Let’s add index.js file to our package, which we defined as an entry point for our package in step 2. It contains the logic for the package. So run the following command:
touch index.js, and add your logic. in this case it looks like this:

module.exports = module.exports.default = function(prefix, suffix) {
    var time = Date.now();
    return (prefix || '') + time.toString() + (suffix || '');
};

The code will provide possibility to generate unique id based on current timestamp, with millisecond precise, with optional prefix and suffix.
Additionally, we will add README.md and .gitignore files:

README.md:

# @mdenic/uniqid

[![npm (scoped)](https://img.shields.io/npm/v/@mdenic/uniqid.svg)](https://www.npmjs.com/package/@mdenic/uniqid)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@mdenic/uniqid.svg)](https://www.npmjs.com/package/@mdenic/uniqid)

A super simple, lightning fast unique id based on the current timestamp in milliseconds, with optional prefix and suffix.

## Install

```
$ npm install @mdenic/uniqid
```

## Usage

```js
var uniqid = require("@mdenic/uniqid");

uniqid();
//=> "1558604880081" //string

uniqid('hello-');
//=> "hello-1558604880081" //string

uniqid('', '-world');
//=> "1558604880081-world" //string

uniqid('hello-', '-world');
//=> "hello-1558604880081-world" //string

```

.gitignore:

/.idea

Ok, so now we have our package prepared for publishing. :)

4.Push code to Github repository

One more step before publishing the package to npm registry. Let’s push the code to our Github(or what ever you preffer) repository.
Run the following commands:

git init
git add . 
git commit -m "initial commit"
git remote add origin https://github.com/MarkoDenic/uniqid.git
git push -u origin master

Now, when you go back to your repository, you will see that the code is pushed, and looks like this:

5.So, the last and the most exciting step, publishing the package

First, we login to our npm account. Run the following command:

npm login
When prompted, enter your username, password, and email address. To test that you have successfully logged in, type:

npm whoami
Your npm username should be displayed.

The command for publishing the package is: npm publish, but we will use npm publish --access=public, because in this case it’s user-scoped (@mdenic)package. You can read more about scoped packages here.

So, we run npm publish --access=public, and are package is hosted on npm registry.

It’s alive! :) 🚀

Go to npmjs.com, sign in and you will find your package:

Repository: https://github.com/MarkoDenic/uniqid
package: https://www.npmjs.com/package/@mdenic/uniqid