DEV Community

Cover image for Create/ Publish your first NPM package
Deep
Deep

Posted on

12 1

Create/ Publish your first NPM package

1.
Create a dir/folder to contain your packages code.

mkdir firstnpmpackage
Enter fullscreen mode Exit fullscreen mode

2.
change path to dir/folder you just created.

cd firstnpmpackage
Enter fullscreen mode Exit fullscreen mode

3.
Now run ..

npm init
Enter fullscreen mode Exit fullscreen mode

or simply(if you use this command instead npm will not ask you for the details of package and will generate it with defaults)

npm init -y
Enter fullscreen mode Exit fullscreen mode

and fill the required details.

Alt Text

4.
Now create an index.js file in this folder, your folder should look like this

    firstnpmpackage
  • index.js
  • package.json

5.
write some code in index.js

#!/usr/bin/env node
function randomNoGenerator(min, max) {
  if(typeof(max) !== 'number' && typeof(min) !== 'number') {
    min = 0;  max = 1;
  }
 console.log(Math.random() * (max-min)) + min;
}
randomNoGenerator(5,10);
Enter fullscreen mode Exit fullscreen mode

6.
Now let's modify our package.json a bit to make it work using cli.

"bin":{
   "demoproject" : "index.js"
},
Enter fullscreen mode Exit fullscreen mode

just add this thing in your package.json
demoproject is the command you will use to execute your package through cli.
index.js is the file that will be first triggered.


7.
We are all ready to go ,
but wait wait you will really want to test your package locally before publishing it.

Let's do it first :
run

sudo npm install -g ./
Enter fullscreen mode Exit fullscreen mode

Our package is installed in our local machine now,
Let run it type this in your cli and see the result.

demoproject
Enter fullscreen mode Exit fullscreen mode

Alt Text



8.
So, now we are done with testing ..
Let's publish it now ,

To make it published you first need to signup on npmjs.com

once you are done signing up!
Run :

npm adduser 
Enter fullscreen mode Exit fullscreen mode

Give your login credentials..

9.
Now we are ready to go ..
open terminal in your root directory..

and Run :

npm publish
Enter fullscreen mode Exit fullscreen mode

Done.....

NOTE : if it gives any error goto package.json and change name of your project any package with same name might be published before...

my github: Deep1144
my npm account: deep1144

Follow me for more..

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (2)

Collapse
 
pavelloz profile image
Paweł Kowalski • Edited

Hint: IF you dont need details (or you use defaults) try npm init -y - it will not ask you about anything.

Ie.

devto|⇒ npm init -y
Wrote to /Users/pavel/projects/private/devto/package.json:

{
  "name": "devto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jsdom": "^16.2.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Paweł Kowalski <pavelloz@gmail.com>",
  "license": "MIT"
}

Also,

sudo npm install -g ./ - I wouldnt recommend this. npm link was implemented to do this ;)

Collapse
 
deep1144 profile image
Deep

Yes definitely true i will add this points in post ❤

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay