Create and Release New Package

Most of us may aware of the hosting packages on the NPM repository. So, In this article, we are going to learn about how to create and release NPM package on https://www.npmjs.com/

I have created and host the package https://www.npmjs.com/package/hello-world-by-mahesh

In this article, I’m going to share you how I have created this package and host it on the https://www.npmjs.com/

Table of Content

Without time waste lets try it step by step:

#Create a Directory Create a Directory

Create a directory npm-hello-world where you want, I’m creating it in D:\xampp\htdocs\npm\

So, Open a terminal and navigate to the directory D:\xampp\htdocs\npm\ and creating the npm-hello-world with below command:

mkdir npm-hello-world

Then navigate inside the directory with:

cd npm-hello-world

Top ↑

#Initialize Package Initialize Package

Now, Type command npm init to initialize the NPM package.

Add the information which comes on the terminal screen. It something looks like below:

D:\xampp\htdocs\npm\npm-hello-world
? npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (hello-world-by-mahesh)
version: (1.0.0)
description: Hello World
entry point: (index.js)
test command:
git repository: https://github.com/maheshwaghmare/npm-hello-world
keywords: npm-hello-world
license: (MIT)
About to write to D:\xampp\htdocs\npm\npm-hello-world\package.json:
{
  "name": "hello-world-by-mahesh",
  "version": "1.0.0",
  "description": "Hello World",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/maheshwaghmare/npm-hello-world.git"
  },
  "keywords": [
    "npm-hello-world"
  ],
  "author": "Mahesh Waghmare",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/maheshwaghmare/npm-hello-world/issues"
  },
  "homepage": "https://github.com/maheshwaghmare/npm-hello-world#readme"
}
Is this OK? (yes) yes

NOTE: Here, I have created the GitHub repository npm-hello-world but, I have set the package name as hello-world-by-mahesh. Because npm-hello-world is not unique and which is exists (https://www.npmjs.com/package/npm-hello-world).

Top ↑

#Login to NPM Login to NPM

Now, Use command npm login to login to your NPM account. e.g.

D:\xampp\htdocs\npm\npm-hello-world  (npm-hello-world@1.0.0)
? npm login
Username: maheshwaghmare
Password:
Email: (this IS public) mwaghmare7@gmail.com
Logged in as maheshwaghmare on https://registry.npmjs.org/.

Okay. If you don’t have the NPM account then crate it at https://www.npmjs.com/ If you have already login.

Or

Do you want to see which account is currently logged in with?

Then use command npm whoami to see currently login username. E.g.

D:\xampp\htdocs\npm\npm-hello-world  (npm-hello-world@1.0.0)
? npm whoami
maheshwaghmare

Top ↑

#Sample Code Sample Code

In our sample package, we are creating the package which performs some mathematical operations.

These are addition, subtraction, multiplication and division.

Create a file index.js file and add below code into it:

/**
 * Addition of two numbers.
 */
module.exports.add = (a, b) => a + b
/**
 * Subtraction of two numbers.
 */
module.exports.sub = (a, b) => a - b
/**
 * Multiplication of two numbers.
 */
module.exports.mul = (a, b) => a * b
/**
 * Dividation of two numbers.
 */
module.exports.div = (a, b) => a / b

Here, We have created the simple arrow functions add, sub, mul & div and export them with module.exports to use it in another project.

We’ll see how to use it in the below section. Before it let’s publish our NPM package.

Top ↑

#Publish the Package Publish the Package

Use command npm publish to publish your package. You can see something like below:

D:\xampp\htdocs\npm\npm-hello-world (master) (hello-world-by-mahesh@1.0.0)
? npm publish
npm notice
npm notice package: hello-world-by-mahesh@1.0.0
npm notice === Tarball Contents ===
npm notice 305B index.js
npm notice 569B package.json
npm notice 133B README.md
npm notice === Tarball Details ===
npm notice name:          hello-world-by-mahesh
npm notice version:       1.0.0
npm notice package size:  592 B
npm notice unpacked size: 1.0 kB
npm notice shasum:        7ef94b6b51f33fe3228729c8f47b707cefe5ffca
npm notice integrity:     sha512-WRH3ux869bUAP[...]wRWMINQQNSXuA==
npm notice total files:   3
npm notice
+ hello-world-by-mahesh@1.0.0

You can see your published package at URL:
https://www.npmjs.com/package/{package-name}

My package hosted on URL:
https://www.npmjs.com/package/hello-world-by-mahesh

Top ↑

#How to use it? How to use it?

We have hosted our package https://www.npmjs.com/package/hello-world-by-mahesh on NPM repository which performs the mathematical operations.

Now, We are going to create another project use-package-hello-world-by-mahesh to use our package hello-world-by-mahesh within it.

I have kept the suffix hello-world-by-mahesh to avoid the confusion.

Let’s get started.

Create and navigate to the directory use-package-hello-world-by-mahesh with commands:

• mkdir use-package-hello-world-by-mahesh
• cd use-package-hello-world-by-mahesh

E.g.

D:\xampp\htdocs\npm
? mkdir use-package-hello-world-by-mahesh
D:\xampp\htdocs\npm
? cd use-package-hello-world-by-mahesh 

Now, Initialize the NPM with npm init e.g.

D:\xampp\htdocs\npm\use-package-hello-world-by-mahesh
? npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (use-package-hello-world-by-mahesh)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
license: (MIT)
About to write to D:\xampp\htdocs\npm\use-package-hello-world-by-mahesh\package.json:
{
  "name": "use-package-hello-world-by-mahesh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mahesh Waghmare",
  "license": "MIT"
}
Is this OK? (yes)

Now, Install our package hello-world-by-mahesh with command npm i hello-world-by-mahesh e.g.

D:\xampp\htdocs\npm\use-package-hello-world-by-mahesh  (use-package-hello-world-by-mahesh@1.0.0)
? npm i hello-world-by-mahesh
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN use-package-hello-world-by-mahesh@1.0.0 No description
npm WARN use-package-hello-world-by-mahesh@1.0.0 No repository field.
+ hello-world-by-mahesh@1.0.1
added 1 package from 1 contributor and audited 1 package in 3.046s

Create a index.js file and add below code:

const {add, sub, mul, div} = require('hello-world-by-mahesh')
console.log( add( 10, 20 ) );
console.log( sub( 10, 20 ) );
console.log( mul( 10, 20 ) );
console.log( div( 10, 20 ) );

Here,

• const {add, sub, mul, div} = require(‘hello-world-by-mahesh’) we have extracted the methods add, sub, mul, div from our package with require('hello-world-by-mahesh').
• add( 10, 20 ) perform the addition operation from our package hello-world-by-mahesh.
• sub( 10, 20 ) perform the addition operation from our package hello-world-by-mahesh.
• mul( 10, 20 ) perform the addition operation from our package hello-world-by-mahesh.
• div( 10, 20 ) perform the addition operation from our package hello-world-by-mahesh.

Lets, Execute our index.js file with the command node index.js. Eg.

D:\xampp\htdocs\npm\use-package-hello-world-by-mahesh  (use-package-hello-world-by-mahesh@1.0.0)
? node index.js
30
-10
200
0.5

Here, We see that our package works successfully as expected.

Top ↑

#Reference Links: Reference Links:

• hello-world-by-mahesh – Created a new NPM package
• npm-hello-world – NPM package Github repository
• use-package-hello-world-by-mahesh – Another project in which we have used our hosted NPM package.
• https://www.youtube.com/watch?v=rTsz09zRuTU&t=616s – Specially thanks to @codedamn to create such a tutorial on YouTube.

Top ↑

#Conclusion Conclusion

In this article, we have created a simple NPM package and host it on NPM packages directory at https://www.npmjs.com/. You can also try to create some packages which may useful for anyone.

How to Create and Release NPM Package.

Tweet