Publishing First NPM Package

Publishing First NPM Package

Created and published first npm package on www.npmjs.com

Have you ever wondered how the npm-packages that you use in your projects, be it in React , Angular or in any other front-end technology or be it with express for back-end, are created and published ?

Well, you have landed at right place.

What we will do

  • will create our package file.
  • will create a git repository
  • will initialize npm
  • will signup and login on npsjs.com

Prerequisites

  • knowledge of javascript
  • knowledge of github

This blog is for absolute beginner who has never published any npm-package. Here we will create and publish our own npm-package that anyone can use in their projects around the globe.

About NPM

NPM is acronym of node-package-manager. Any javascript project can use npm to pull out some code that someone has already written, and use it without writing from scratch.

Creating npm package

We will create very simple package call it short-l, that will be alternate for console.log()

Open your code editor preferably vscode.

create a folder mkdir package
move to that folder cd package
create a file index.js touch index.js or you can create manually also. now write a simple function s that just takes an input and logs it. see the ode below

function s (str){
    return console.log(str);
}

module.exports.s=s;

and don't forget to export it as well.

Now initialize an empty git repository inside same directory.

git init

also create a README.md file , where you can write all about your package, how to install it, how to use it, and what it does, everything.
touch README.md

so now you have two files index.js and README.md.

Now go to github.com and make a public repository.

repo.PNG

No need to add readme file there, because you have created it in your directory already.

Now clone your repository in your directory add push all code to that repository.

git remote add origin `paste your repository url here`
git add .
git commit -m "code update"
git push origin master

npm init

Now we need to have package.json file to publish it on npmjs, which will contain all information(not code) about our package. So run command npm init

package name: (package) short-l
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/Afzal95/first-npm-package.git)
keywords: log
author:
license: (ISC)
About to write to C:\Users\Afzal\Desktop\log-package\package\package.json:

{
  "name": "short-l",
  "version": "1.0.0",
  "description": "`npm install console-l`",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Afzal95/first-npm-package.git"
  },
  "keywords": [
    "log"
  ],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Afzal95/first-npm-package/issues"
  },
  "homepage": "https://github.com/Afzal95/first-npm-package#readme"
}


Is this OK? (yes)

write your package name, make sure package with similar name is not available on npmjs.com

provide description also if you want. initial version will be 1.0.0 Entry point should be your file name, in this case index.js(where you have written code for package) rest everything you can skip and press enter, it will take git url automatically and will set it as homepage.

Now here comes the publish part

Now for publish it on npm, make sure you have signed up and login on npmjs.com
now go back to vscode terminal and run npm login
it will ask for your npm login credentials

npm login
Username: 
Password:
Email: (this IS public)

fill in these details.
Then run command npm publish
and you will see these details

npm publish
npm notice
npm notice package: short-l@1.0.0
npm notice === Tarball Contents ===
npm notice 180B  tmpnodejsnpm-cache/_cacache/index-v5/aa/60/314212ab5c991854366d06bd9a3625efe115b7920072fb17b5fdda635974
npm notice 159B  tmpnodejsnpm-cache/_cacache/index-v5/42/e8/733f84666bf8ae51438746731476ab9b2f309ff6f8ebeda2a8ff3fe11009
npm notice 158B  tmpnodejsnpm-cache/_cacache/index-v5/d2/98/d47613996180899afe23d93ef9ab54e19fff5e24464180eb63c1883b45d2
npm notice 158B  tmpnodejsnpm-cache/_cacache/index-v5/93/94/e081704c92de10d2fc2c801ee88cf302d5255399bb7e063009ff00f00204
npm notice 68B   index.js

npm notice 516B  package.json

npm notice 2.5kB tmpnodejsnpm-cache/_logs/2021-06-21T11_07_55_184Z-debug.log

npm notice 2.5kB tmpnodejsnpm-cache/_logs/2021-06-21T11_08_18_842Z-debug.log

npm notice 183B  README.md

npm notice === Tarball Details ===
npm notice name:          short-l
npm notice version:       1.0.0
npm notice package size:  2.3 kB
npm notice unpacked size: 6.5 kB
npm notice shasum:        304a26046a08d69073abce49e91801e4cf9781fc
npm notice integrity:     sha512-3jXmsuAs9+3hc[...]6ohP4e2hC5P8Q==
npm notice total files:   9
npm notice
+ short-l@1.0.0

It means short-l version 1.0.0 is published on npmjs.com.

now you can head over to npmjs.com and search with your package name. and here is your published package on www.npmjs.com

npm-page.PNG

Now anyone can install this package in their react projects, angular projects or in simple javascript files also to use as per instructions, at place of consol.log().

This was very basic just to give idea how you can make your own npm package.

You can create awesome things also, like any carousel component, any navbar component, any layout and publish it as npm package.

If you fail to publish after npm publish , make sure you have verified your email-address after signup on npmjs.com . Also your package name should be unique.

I will be posting on more javascript, react and redux related topics. Hope this was helpful and you enjoyed it, ofcourse If you have followed till here and coded along then you may have created and published your own npm package by now.

Don't forget to share your package below in the comment.

Please feel free to comment,review and you can mention as well if there is something you think should be corrected.

Thanks for reading. Bye.