 centralizes third-party, open-source Node.js packages and libraries within a large, online registry. Contributing to the Node.js ecosystem involves no vetting process, which lets anyone publish packages to the npm registry with little effort. Not only has npm's short process for publishing packages led to the explosive growth of the Node.js ecosystem, but also fosters the development of various types of packages: front-end libraries/frameworks, tooling, bundlers, routers, state management, etc. However, this comes at the cost of more packages being released with more security vulnerabilities and less reliability. Despite these concerns, npm continues to introduce new features and statistics for helping developers identify high quality packages.

A library author uses npm's command line client to publish their library's package to the npm registry and share it. Once published, npm allows developers to update their projects' dependencies with the latest version of this package or install this package within their projects.

Below, I'm going to show you how to publish a package to the npm registry.

 TypeScript library. It will be modified accordingly to get it ready for publishing. 

To get started, you must have an npm account. If you do not have an npm account, sign up for an account 

Within the root of the package directory, run the following command in the terminal:

Logging into your account associates your package with your account.

You will be prompted to enter your npm username, password and e-mail address.

When you publish a package to the npm registry, there are some files and directories, such as a testing suite and coverage reports, that can be omitted from the package. A testing suite validates your library's functionality and coverage reports inform you of areas in your code that lack tests. They are not required for end users to consume your library within their projects.

The main benefit of excluding files with 

 is reducing the number of files and directories the end user downloads when fetching your package from npm. Ideally, end users should be able to quickly download your package, and your package should not take up unnecessary space on their machines.

 testing framework, then you would add the 

To further reduce the number of files within the package, you can exclude formatting-related configuration files, such as 

__tests__
coverage
.editorconfig
.eslintrc.js
.prettierrc

Just think about which files and directories are needed within the package to allow end users to use your library. Whichever files and directories are not necessary should be added to the 

 file, then the files and directories listed within the 

 file will automatically be excluded from the package.

Alternatively, you could list the files to include within the package via 

The entry point of your library indicates the file from which execution begins when the library is imported. By default, npm searches for a 

 file to determine the package's entry point. For tooling that supports ESM modules, you can define a 

 property. It is a proposal for ES6 module interoperability in Node.js. Read more about it 

Commonly, your library's generated build will be outputted to a  

 properties should point to files within either of these directories.

{
  "main": "dist/index.js",
  "module": "dist/index.mjs"
}

To verify the package's contents before publishing to npm (and whether or not the 

 files filter out the correct files and directories), create a tar archive of the package. This tar archive contains all of the files and directories that will end up in the published package.  

To generate the tarball, run the following command:

In the current directory, you will find a tar file named 

To extract and list its contents, run the following command:  

$ tar -xzf <package-name>-v<version>.tgz
$ cd package
$ ls

 command deposits the contents into a directory named 

Lastly, to publish the package to npm, run the following command:

When prompted to enter a version, press enter to use the version mentioned in the 

If you run into the following error message, then you will need to enable two-factor authentication for your npm account:

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/<package> - This package requires that publishers enable TFA and provide an OTP to publish. For more info, visit: https://go.npm.me/2fa-guide

To enable two-factor authentication, visit your npm account's "Account Settings" page and click the "Enable 2FA" button under the "Two Factor Authentication" section.

After you enter your password, npm redirects you to a wizard that walks through the process of enabling two-factor authentication.

Enable two-factor authentication for both authorization and updating/publishing packages.

Scan the QR code with an authenticator app like 

. Verify that Authy successfully registered npm by entering a six-digit code generated by Authy.

Once two-factor authentication is successfully enabled, you will be shown recovery codes. Save them to a new, empty text file. Without these codes, it will not be possible to recover your account in the event that you are not able to provide the one-time password.

Once your package has been published to npm, you can navigate to your package's page at npm's website.

Try publishing your own packages to npm. You can also check out our new course, 

The newline Guide to Creating React Libraries from Scratch

where we teach you everything you need to know to succeed in creating a library. 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Publishing Packages to NPM</h1><p><strong><a href="https://www.npmjs.com/" rel="noopener noreferrer nofollow">npm</a></strong> centralizes third-party, open-source Node.js packages and libraries within a large, online registry. Contributing to the Node.js ecosystem involves no vetting process, which lets anyone publish packages to the npm registry with little effort. Not only has npm's short process for publishing packages led to the explosive growth of the Node.js ecosystem, but also fosters the development of various types of packages: front-end libraries/frameworks, tooling, bundlers, routers, state management, etc. However, this comes at the cost of more packages being released with more security vulnerabilities and less reliability. Despite these concerns, npm continues to introduce new features and statistics for helping developers identify high quality packages.</p><p>A library author uses npm's command line client to publish their library's package to the npm registry and share it. Once published, npm allows developers to update their projects' dependencies with the latest version of this package or install this package within their projects.</p><p>Below, I'm going to show you how to publish a package to the npm registry.</p><p>I will demonstrate this with the <code><a href="https://github.com/newline-sandbox/rgb-hex" rel="noopener noreferrer nofollow">rgb-hex</a></code> TypeScript library. It will be modified accordingly to get it ready for publishing. </p><h2 class="heading-anchor-text" id="logging-into-npm"><span>Logging into NPM</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#logging-into-npm">#</a></h2><p>To get started, you must have an npm account. If you do not have an npm account, sign up for an account <a href="https://www.npmjs.com/signup" rel="noopener noreferrer nofollow">here</a>.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/b5clonggvukoyf5/Screen%20Shot%202021-07-26%20at%2012.07.14%20AM.png" contenteditable="false"><div></div></figure><p>Within the root of the package directory, run the following command in the terminal:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-4XnZAjufwrAWAA1z0IJ6n" id="cm-4XnZAjufwrAWAA1z0IJ6n">$ npm login</textarea><p>Logging into your account associates your package with your account.</p><p>You will be prompted to enter your npm username, password and e-mail address.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/9nwd7civjlwojuu/hw28h110u8fy7f.png" contenteditable="false"><div></div></figure><h2 class="heading-anchor-text" id="excluding-files-with-npmignore"><span>Excluding Files with <code>.npmignore</code></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#excluding-files-with-npmignore">#</a></h2><p>When you publish a package to the npm registry, there are some files and directories, such as a testing suite and coverage reports, that can be omitted from the package. A testing suite validates your library's functionality and coverage reports inform you of areas in your code that lack tests. They are not required for end users to consume your library within their projects.</p><p>The main benefit of excluding files with <code>.npmignore</code> is reducing the number of files and directories the end user downloads when fetching your package from npm. Ideally, end users should be able to quickly download your package, and your package should not take up unnecessary space on their machines.</p><p>If your library uses the <a href="" rel="noopener noreferrer nofollow">Jest</a> testing framework, then you would add the <code>__tests__</code> and <code>coverage</code> directories to the <code>.npmignore</code> file.  </p><p>(<code>.npmignore</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-6wiCzyrxO-kTmyGF82eS9" id="cm-6wiCzyrxO-kTmyGF82eS9">__tests__
coverage</textarea><p>To further reduce the number of files within the package, you can exclude formatting-related configuration files, such as <code>.eslintrc.js</code>, <code>.prettierrc</code> and <code>.editorconfig</code>.</p><p>(<code>.npmignore</code>)</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-H6P8zIggBNL85k3vOOGXt" id="cm-H6P8zIggBNL85k3vOOGXt">__tests__
coverage
.editorconfig
.eslintrc.js
.prettierrc</textarea><p>Just think about which files and directories are needed within the package to allow end users to use your library. Whichever files and directories are not necessary should be added to the <code>.npmignore</code> file.</p><p><em>Note</em>: If the project contains a <code>.gitignore</code> file, then the files and directories listed within the <code>.gitignore</code> file will automatically be excluded from the package.</p><p>Alternatively, you could list the files to include within the package via <code>package.json</code>'s <code><a href="https://docs.npmjs.com/cli/v7/configuring-npm/package-json#files" rel="noopener noreferrer nofollow">files</a></code> property.</p><h2 class="heading-anchor-text" id="updating-entry-point-in-packagejson"><span>Updating Entry Point in <code>package.json</code></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#updating-entry-point-in-packagejson">#</a></h2><p>The entry point of your library indicates the file from which execution begins when the library is imported. By default, npm searches for a <code>main</code> property inside of the <code>package.json</code> file to determine the package's entry point. For tooling that supports ESM modules, you can define a <code>module</code> property that points to the package's <code>.mjs</code> file.</p><p><em>Note</em>: <code>module</code> is not an official <code>package.json</code> property. It is a proposal for ES6 module interoperability in Node.js. Read more about it <a href="https://stackoverflow.com/questions/42708484/what-is-the-module-package-json-field-for" rel="noopener noreferrer nofollow">here</a>.</p><p>Commonly, your library's generated build will be outputted to a  <code>build</code> or <code>dist</code> directory. Therefore, the <code>main</code> and <code>module</code> properties should point to files within either of these directories.</p><p>(<code>package.json</code>)</p><textarea data-iscodemirror="true" data-mode="application/json" data-uniqueid="cm-BeyNACOVKkwGyOLq8ejbt" id="cm-BeyNACOVKkwGyOLq8ejbt">{
  "main": "dist/index.js",
  "module": "dist/index.mjs"
}</textarea><h2 class="heading-anchor-text" id="testing-publishing-with-npm-pack"><span>Testing Publishing with <code>npm pack</code></span><a class="d-inline heading-anchor" title="Direct link to heading" href="#testing-publishing-with-npm-pack">#</a></h2><p>To verify the package's contents before publishing to npm (and whether or not the <code>.gitignore</code> and <code>.npmignore</code> files filter out the correct files and directories), create a tar archive of the package. This tar archive contains all of the files and directories that will end up in the published package.  </p><p>To generate the tarball, run the following command:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-SBrj6auVkrDnNbhs-TsTo" id="cm-SBrj6auVkrDnNbhs-TsTo">$ npm pack</textarea><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/u77v18g1y0ptmce/Screen%20Shot%202021-08-12%20at%204.04.41%20PM.png" contenteditable="false"><div></div></figure><p>In the current directory, you will find a tar file named <code>&lt;package-name&gt;-v&lt;version&gt;.tgz</code>. <code>package-name</code> comes from the <code>name</code> property of <code>package.json</code>, and <code>version</code> comes from the <code>version</code> property of <code>package.json</code>.</p><p>To extract and list its contents, run the following command:  </p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-Rg6-S0CY8IJZn-qvVo1CG" id="cm-Rg6-S0CY8IJZn-qvVo1CG">$ tar -xzf &lt;package-name&gt;-v&lt;version&gt;.tgz
$ cd package
$ ls</textarea><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/i61jqw7kgc1i8df/Screen%20Shot%202021-08-12%20at%204.49.03%20PM.png" contenteditable="false"><div></div></figure><p>The <code>tar -xzf</code> command deposits the contents into a directory named <code>package</code>. </p><p>Here, we can see that the <code>package.json</code> file, <code>README.md</code> file and <code>dist</code> directory are included.</p><h2 class="heading-anchor-text" id="publish-to-the-npm-registry"><span>Publish to the npm Registry</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#publish-to-the-npm-registry">#</a></h2><p>Lastly, to publish the package to npm, run the following command:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-KR3hPfE8ApyNtedL93eOH" id="cm-KR3hPfE8ApyNtedL93eOH">$ npm publish</textarea><p>When prompted to enter a version, press enter to use the version mentioned in the <code>package.json</code> file.</p><p>If you run into the following error message, then you will need to enable two-factor authentication for your npm account:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-osMLDBH5Nz7Y2DivMn_OS" id="cm-osMLDBH5Nz7Y2DivMn_OS">npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/&lt;package&gt; - This package requires that publishers enable TFA and provide an OTP to publish. For more info, visit: https://go.npm.me/2fa-guide</textarea><p>To enable two-factor authentication, visit your npm account's "Account Settings" page and click the "Enable 2FA" button under the "Two Factor Authentication" section.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/x3jv1nnhhvouobb/fdafdai23g912712.png" contenteditable="false"><div></div></figure><p>After you enter your password, npm redirects you to a wizard that walks through the process of enabling two-factor authentication.</p><p>Enable two-factor authentication for both authorization and updating/publishing packages.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/l83pr99u4xpkvqu/Screen%20Shot%202021-08-12%20at%206.28.58%20PM.png" contenteditable="false"><div></div></figure><p>Scan the QR code with an authenticator app like <a href="https://authy.com/" rel="noopener noreferrer nofollow">Authy</a>. Verify that Authy successfully registered npm by entering a six-digit code generated by Authy.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/veappt4rn7j8yvr/Screen%20Shot%202021-08-12%20at%206.29.28%20PM.png" contenteditable="false"><div></div></figure><p>Once two-factor authentication is successfully enabled, you will be shown recovery codes. Save them to a new, empty text file. Without these codes, it will not be possible to recover your account in the event that you are not able to provide the one-time password.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/dvyuz2wmpmy2wur/fsad218y219127912.png" contenteditable="false"><div></div></figure><p>Return to the terminal and re-enter the <code>npm publish</code> command.</p><p>Once your package has been published to npm, you can navigate to your package's page at npm's website.</p><figure class="photo figure-position-inline"><img src="https://www.dl.dropboxusercontent.com/s/ikula4hcwru6ild/Screen%20Shot%202021-08-12%20at%2010.44.35%20PM.png" contenteditable="false"><div></div></figure><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#next-steps">#</a></h2><p>Try publishing your own packages to npm. You can also check out our new course, <em><a href="https://www.newline.co/courses/creating-react-libraries-from-scratch" rel="noopener noreferrer nofollow">The newline Guide to Creating React Libraries from Scratch</a>, </em>where we teach you everything you need to know to succeed in creating a library.&nbsp;</p><figure class="photo figure-position-inline"><a href="https://www.newline.co/courses/creating-react-libraries-from-scratch" contenteditable="true"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210921143532125_Course%20Card%20%285%29%20%282%29%20%281%29.png" attachmentid="e1fa5345-c3b8-4994-80e8-7982e7028170" contenteditable="false" data-width="1920" data-height="1080"></a><div></div></figure><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><a href="https://docs.npmjs.com/" rel="noopener noreferrer nofollow">npm Documentation</a></p></li></ul><h1 data-node-type="titlePlaceholder" class="titlePlaceholder"></h1><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Publishing Packages to NPM

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript