Getting Started with NPM: A Step-by-Step Guide to Creating and Publishing Your Own Package
Published: 2023-08-26 14:32:48

<p>Hello everyone! I am very happy to make this blog and share some knowledge. Now, In this blog, I am going to teach you how to create an npm package and how to publish it. At the end of this article, you will get an idea of how to create and publish an NPM package.</p>
<p><strong>First of all, what is NPM?</strong></p>
<p>NPM stands for Node Package Manager. Yes, it's a Node.js package manager that helps us to easily manage and distribute packages like libraries, frameworks, tools, etc. By using this, we can install packages globally or locally.</p>
<p>Example: <code>npm install package-name</code> Using this command, you can install a package in your project.</p>
<p><strong>Let's cook our own NPM package:</strong></p>
<p>The very first ingredient for making an NPM is Node.js. You can install it through their official website <a target="_blank" href="https://nodejs.org/en">nodejs.org</a>.</p>
<p>First, you want to decide what you would like to create as an NPM package. For now, we are simply creating our package with this code.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693026887749/49628b84-fcbf-49de-bd61-4b2e97d1739a.png" alt class="image--center mx-auto" /></p>
<p>This program returns a string like this "This is NPM".</p>
<p>Now, create a folder. In our case, we create a folder with the name "my-npm-package".</p>
<p>Open your terminal in this folder and run this command: <code>npm init</code></p>
<p>By running this command, you can provide details about your package, like   <code>name, version, license, entry point, author, description, keywords</code></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693032230850/7576a73d-19e2-4538-9bd8-643e1263a66f.png" alt class="image--center mx-auto" /></p>
<p>After filling in these details, a file called <strong>package.json</strong> will be created in that folder.   then open that package.json with a text editor and check your package's details. If you need to edit any details or add some more details about your package, you can do that with that file.</p>
<p>If you are using React JS, you can add dependencies and devDependencies like this:</p>
<pre><code class="lang-json"><span class="hljs-string">"dependencies"</span>: 
{     
<span class="hljs-attr">"@babel/core"</span>: <span class="hljs-string">"^7.22.10"</span>, 
<span class="hljs-attr">"@babel/plugin-proposal-private-property-in-object"</span>: <span class="hljs-string">"^7.21.11"</span>,
<span class="hljs-attr">"@babel/plugin-syntax-jsx"</span>: <span class="hljs-string">"^7.22.5"</span>, 
<span class="hljs-attr">"@babel/preset-env"</span>: <span class="hljs-string">"^7.22.10"</span>, 
<span class="hljs-attr">"@babel/preset-react"</span>: <span class="hljs-string">"^7.22.5"</span>,
<span class="hljs-attr">"babel-loader"</span>: <span class="hljs-string">"^9.1.3"</span>, 
<span class="hljs-attr">"react"</span>: <span class="hljs-string">"^18.2.0"</span>,
<span class="hljs-attr">"react-dom"</span>: <span class="hljs-string">"^18.2.0"</span>  
 },
  <span class="hljs-string">"devDependencies"</span>: 
{
    <span class="hljs-attr">"autoprefixer"</span>: <span class="hljs-string">"^10.4.15"</span>,
    <span class="hljs-attr">"copy-webpack-plugin"</span>: <span class="hljs-string">"^11.0.0"</span>,
    <span class="hljs-attr">"tailwindcss"</span>: <span class="hljs-string">"^3.3.3"</span>,
    <span class="hljs-attr">"webpack-cli"</span>: <span class="hljs-string">"^5.1.4"</span>
  }
</code></pre>
<p>but for now, <mark>we don't use these dependencies</mark>, so skip this.</p>
<p>Then in your package.json it has a key called main that contains the file name that we entered previously in terminal as an entry point.   So for now, our package JSON contains index.js, so create an index.js file and paste our code.</p>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">helloWorld</span>(<span class="hljs-params"></span>)
</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"This is Npm"</span>
}
<span class="hljs-built_in">module</span>.exports = helloWorld
</code></pre>
<p>Now create a test folder, and inside that folder, create a test.js file to check our code to see whether it's working or not.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693034299105/0b966c52-30a2-4388-a6fa-097bebdaa7e3.png" alt class="image--center mx-auto" /></p>
<p>In that test.js paste this code.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> helloWorld = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./hello-world'</span>);

<span class="hljs-built_in">console</span>.log(helloWorld());
</code></pre>
<p>then navigate to that test folder in your terminal and run <code>npm link package-name</code> in our case <code>npm link my-npm-package</code></p>
<p>It will create node_modules in the test folder. It will install our package locally, Then run <code>node test.js</code> which will return "This is Npm" as an output in your terminal.</p>
<p>So our package is working well.</p>
<p>Now go back to the package folder and type <code>npm publish</code> in the terminal.</p>
<p>This time it returns an error because we want to create an NPM account for this. Go to <a target="_blank" href="https://www.npmjs.com/">npmjs website</a></p>
<p>After register your account, You want to verify your account and complete Two-Factor Authentication for this Two-Factor Authentication you can use any Authentication provider.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693034861475/a45c9753-1248-4bc9-b726-9f7910381572.png" alt class="image--center mx-auto" /></p>
<p>but I suggest you use <strong>Google Authenticator</strong>.</p>
<p>then back to the text editor and run that <code>npm publish</code> again it will ask you to enter the OTP in the browser by clicking enter. Once you enter the OTP, your first NPM package is published.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1693035299519/125b2323-355f-4d21-bdb9-98eed8a2bbe9.png" alt class="image--center mx-auto" /></p>
<p>Hurray!!! We created and published our first NPM package.</p>
<p>Now users can access Our npm from anywhere by installing the package using <code>npm i my-npm-package</code></p>
<p>Note: For the teaching purpose i use this name if you want to create and publish a package check the availability of the name in npmjs website's search bar. Because , you cannot publish a package with a duplicate name.</p>
<p>Yeah! that's it I hope I explained the process of creating a basic NPM package understandably.</p>
<p>See you in another blog. Bye!!!</p>
</br><p style="color:#757CF9;">This article is published w/ <a target="_blank" href="https://scattr.io?ref=dev">Scattr  ↗️</a></p>