How to publish your first npm package.

Hello guys,

Today i will be going over how to create and publish your first npm package so as you can re-use it in more than one application that your building.

First of what is npm and what is npm package

For those who are javascript developers say in (Reat , Vue , Angular and Node ) the term npm is not new.Yes there other management tools but npm is the most popular one out there apart from yarn or bower.

So what is npm ?

Npm is a short form for node package manager a default package manager for the JavaScript runtime environment ( Node Js) , It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.The registry is accessed via the client, and the available packages can be browsed and searched via the npmjs website. The package manager and the registry are managed by npm, Inc (source).

What is a npm package ?

Am sure if you use modern javascript development frameworks or environment you have used more than one package in your application. Basically if am comparing javascript and php say react js and laravel. This is like comparing laravel packages or libraries to node packages or libraries.

On laravel the most common registry is packagist while in javascript the most common registry is npmjs.

How to create a npm package

Step 1: Create your npm account

Start here

Step 2: login via Terminal

Go to your terminal and type:

npm adduser

You can also use the command:

npm login

You’ll get a prompt for your username, password and email. Stick them in there!

You should get a message akin to this one:

Logged in as dbrax to scope @username on https://registry.npmjs.org/.

Nice!

Step 3: Let’s Code

First we need a folder to hold our code. Create one in whichever way is comfortable for you. I’m calling my package otp .

I’ve added some terminal commands for those who aren’t familiar with them.

mkdir otp && cd otp

You will need node , hence make sure you have node installed on your machine.

If you don’t have node installed yet and don’t know how please read through this documentation https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

After you install node use this command below to initialize your package with a package.json

npm init

You can hit enter to all options, Here is an example of my final package.json

{
"name": "@dbrax/otp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"otp"
],
"author": "epmnzava@gmail.com",
"license": "MIT"
}

Step 4 : Publish

To publish your npm package, you run the well-named command: npm publish.

npm publish

Aw shucks.

npm ERR! publish Failed PUT 402npm ERR! code E402npm ERR! You must sign up for private packages : @dbrax/otp

Allow me to explain.

Scoped packages are automatically published privately because, as well as being useful for single users like us, they are also utilized by companies to share code between projects. If we had published a normal package, then our journey would end here.

All we need to change is to tell npm that actually we want everyone to use this module — not keep it locked away in their vaults. So instead we run:

npm publish --access=public

If everything is okay you should get the above feedback and an email that you have published your package.

🔥 🔥 🎆 congratulations you have published your first package to npmjs registry 👏 👏

Let’s Add Simple code that can be used

We have no code yet.

GitHub is a great place to put your code. Let’s make a new repository.

Let’s write a very simple function on our index.js

module.exports = function otp(string) {
return "I have send you a code";
};

Useless — but beautiful

There it is.

A small function just to test things out.

So all an npm package requires is an index.js file. This is the entry point to your package. You can do it in different ways as your package becomes more complex.

But for now this is all we need.

Done

Let’s publish our spectacular package.

Version

First we’ll update the version with the npm version command.

This is a major release so we type:

npm version major

Which outputs:

v2.0.0

Publish again!

Let’s run our new favorite command:

npm publish

It is done:

Before you go… Thanks for reading the article! If you enjoyed it, please don’t forget to show your appreciation by clicking 👏 below!

Any questions or comments hit me up on

Mail: epmnzava@gmail.com

Twitter: https://twitter.com/epmnzava

Github: https://github.com/dbrax