{"id":2000,"date":"2022-06-23T12:00:00","date_gmt":"2022-06-23T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/how-to-publish-package-to-npm-step-by-step\/"},"modified":"2026-08-28T14:38:35","modified_gmt":"2026-08-28T12:38:35","slug":"how-to-publish-package-to-npm","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-publish-package-to-npm\/","title":{"rendered":"How to Publish Package to NPM \u2013 Step by Step"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn how to publish package to NPM step by step, from creating and testing a Node package to publishing regular and scoped packages.<\/em><\/p>\n\n\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p>Create a Node application and package it for publication to NPM.<\/p>\n<\/li>\n<li>\n<p>Use <code>npm link<\/code> to test the package locally before publishing.<\/p>\n<\/li>\n<li>\n<p>Publish the package using the <code>npm publish<\/code> command.<\/p>\n<\/li>\n<li>\n<p>Scoped packages can be published under your NPM username.<\/p>\n<\/li>\n<li>\n<p>Use <code>npm publish --access=public<\/code> to publish a scoped package publicly.<\/p>\n<\/li>\n<\/ul>\n<p>In this tutorial, you will learn how to create and publish your first npm package step by step.<\/p>\n<h4><strong>Prerequisite<\/strong><\/h4>\n<ul>\n<li>Make sure you have an NPM account. If not, just go to <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.npmjs.com\/<\/a> and create a free account.<\/li>\n<li>You need to have and IDE, either VS Code or IntelliJ<\/li>\n<\/ul>\n<p>We would cover the following<\/p>\n<ol>\n<li><a href=\"#t1\">Create a Node Application<\/a><\/li>\n<li><a href=\"#t2\">Test the Package<\/a><\/li>\n<li><a href=\"#t3\">Publish the Application<\/a><\/li>\n<li><a href=\"#t4\">Publish a Scoped Package<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Create a Node Application<\/strong><\/h4>\n<p>We\u2019ll begin by creating a simple node application. This is the application that would contain the functions we want to expose through npm. So follow the steps below:<\/p>\n<p><strong>Step 1<\/strong> \u2013 Create an empty Github repository<\/p>\n<p><strong>Step 2<\/strong> \u2013 Create an empty directory and open it in VS Code ( you can also use IntelliJ).<\/p>\n<p><strong>Step 3<\/strong> \u2013 Create an empty\u00a0 sub-directory ( I call it package). This will contain the actual package we\u2019ll be publishing. By the way, a package is just a fancy name for a collection of one or more files (modules) which contains function(s)<\/p>\n<p><strong>Step 4<\/strong> \u2013 Navigate into your package sub-folder<\/p>\n<p><strong>Step 5<\/strong> \u2013 Initialize your application by copying the commands from git and running on your command line.<\/p>\n<p><strong>Step 6<\/strong> \u2013 Initialize the node application using npm init command and fill in the prompts.<\/p>\n<p><strong>Note<\/strong> \u2013 Give the package a name. Here I call it <strong>genius-greet<\/strong>. The name of the package is important!<\/p>\n<p><strong>Step 7<\/strong> \u2013 Create a file inside the package folder. Name it index.js just like in the npm init prompt. The content of the file is as follows:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/Collection of Functions to say a greeting<\/span>\n\n<span style=\"color: #008800; font-weight: bold;\">function<\/span> sayHello(name) {\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>Hello ${name}<span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>\n}\n\n <span style=\"color: #008800; font-weight: bold;\">const<\/span> sayHi <span style=\"color: #333333;\">=<\/span> (name) <span style=\"color: #333333;\">=&gt;<\/span> {\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>Hi ${name}<span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>\n}\n\n<span style=\"color: #008800; font-weight: bold;\">function<\/span> sayWelcome(name) {\n    <span style=\"color: #008800; font-weight: bold;\">return<\/span> <span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>Welcome ${name}<span style=\"color: #ff0000; background-color: #ffaaaa;\">`<\/span>\n}\n\n module.exports <span style=\"color: #333333;\">=<\/span> {sayHello, sayHi, sayWelcome}\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Test the Application<\/strong><\/h4>\n<p>Generally before you publish anything, it\u2019s good to test it to make sure it works as expected. So we would create a test application\u00a0 that would use the package we are creating.<\/p>\n<p>We would use the<strong> npm link<\/strong> command to simulate the behaviour of an npm package. The steps are given below:<\/p>\n<p><strong>Step 1<\/strong> \u2013 Create a folder to hold the test application. <strong>npm-demo<\/strong><\/p>\n<p><strong>Step 2<\/strong> \u2013 Login to npm using the command npm login and enter your username and password.<\/p>\n<p><strong>Step 3<\/strong> \u2013 While in the original package directory, run the command <strong>npm link.<\/strong> This command allows your local package to to simulate an npm package.<\/p>\n<p><strong>Step 4<\/strong> \u2013 Navigate into the test directory.<\/p>\n<p><strong>Step 5<\/strong> \u2013 While in this directory, run the command npm link <strong>genius-greet<\/strong>. This command is equivalent to <strong>npm install<\/strong>. You will notice that our package is install in the test application.<\/p>\n<p><strong>Step 6<\/strong>\u00a0\u2013 Create a file named <strong>client.js<\/strong> ( you can use any name). The content of the file is given below<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/A file to test our new package<\/span>\n\n<span style=\"color: #008800; font-weight: bold;\">const<\/span> greet <span style=\"color: #333333;\">=<\/span> require(<span style=\"background-color: #fff0f0;\">\"genius-greet\"<\/span>)\n\nconsole.log(greet.sayHi(<span style=\"background-color: #fff0f0;\">\"Kindson\"<\/span>))\n\nconsole.log(greet.sayHello(<span style=\"background-color: #fff0f0;\">\"Kindson\"<\/span>))\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 7<\/strong> \u2013 Test the application by running the command node client.js. You will notice that the greetings are logged in the console. This means that everything worked as expected.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Publish the Package<\/strong><\/h4>\n<p>Once you\u2019ve confirmed that everything worked as expected. It\u2019s time to publish the package. This is done using a single command:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">npm publish\n<\/pre>\n<p>&nbsp;<\/p>\n<p>If this command runs successfully, your package will be published and available in npm! So you can check that it\u2019s there. After now you can just install your package just like any other package using <em><strong>npm install genius greet<\/strong><\/em>.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Publish a Scoped Package<\/strong><\/h4>\n<p>A scoped package is a package published under some user. The name of this package is prefixed by the your npm username. For example <strong><em>kindsonthegenius\/greetings<\/em><\/strong>.<\/p>\n<p>This is very important because you many have a package with an already existing name. In that case you need to publish it as a scoped package. That requires only two steps as given below:<\/p>\n<p><strong>Step 1<\/strong> \u2013 Change the name of the package in the package.json file to be prefixed with your username<\/p>\n<p><strong>Step\u00a02<\/strong> \u2013 Publish the package using the following command:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">npm publish --access=public\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Now you can check your npm profile and see that the package is available there as well.<\/p>\n<p>If you\u2019ve come this far, big thumbs up to you! If you have any issues, just write me a comment below. Also do watch the video tutorial on my <a href=\"https:\/\/www.youtube.com\/c\/KindsonTheTechPro\" target=\"_blank\" rel=\"noopener\">YouTube Channel \u2013 Kindson The Tech Pro<\/a>.<\/p>\n<h3>FAQs<\/h3>\n<p><strong>What is an NPM package?<\/strong><\/p>\n<p>An NPM package is a collection of one or more files or modules containing functions and other code that can be shared and installed through NPM.<\/p>\n<p><strong>How do I publish a package to NPM?<\/strong><\/p>\n<p>After creating and testing your package, run the <code>npm publish<\/code> command from the package directory.<\/p>\n<p><strong>How can I test an NPM package before publishing it?<\/strong><\/p>\n<p>You can use <code>npm link<\/code> to simulate how the package will behave when installed through NPM and test it from another Node application.<\/p>\n<p><strong>What is a scoped NPM package?<\/strong><\/p>\n<p>A scoped package is published under an NPM username or organization. The package name is prefixed with the scope, helping distinguish it from other packages with the same or similar names.<\/p>\n<p><strong>How do I publish a scoped package?<\/strong><\/p>\n<p>Update the package name in <code>package.json<\/code> to include your NPM username and publish it using <code>npm publish --access=public<\/code>.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>Publishing your first package to NPM is a straightforward process once you understand the basic workflow. You can create your Node application, test the package locally with <code>npm link<\/code>, and then publish it using <code>npm publish<\/code>.<\/p>\n<p>Scoped packages provide another option when you want to publish a package under your NPM username, particularly when the package name you want is already taken. With these steps, you can create, test, and publish your own reusable NPM packages.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to publish package to NPM step by step, from creating and testing a Node package to publishing regular and scoped packages. TL;DR Create &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2000","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=2000"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2000\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2000\/revisions\/2574"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}