This video is available to students only

Deploying to NPM

How to configure and deploy to a public npm repository.

The next step is getting our code on npm so a developer can install Scroller. We've been using the yarn command, but behind the scenes, Yarn still uses npm as its package registry. A package registry is a central storage for packages/libraries. By default, npm uses its own public registry to store code. For example, when we ran yarn add react in Module 1, Yarn first reached out to npm's public registry asking if it knows about a package called react. If react is in the registry, npm grabs the most up-to-date tarball, uncompresses it in our node_module directory, and links any dependencies. To allow developers to install and use Scroller, we need to publish Scroller to the npm package registry.

In the open-source community, you'll generally only interact with npm's public registry, but inside your company, you may see private registries like npm's enterprise offering or Artifactory.

Setting up npm#

If you don't already have an account, head over to npm to create a new account. Having an npm account will help associate packages to you, and allow us to get metrics on our packages.

  1. Click the "Sign Up" button on the top right of the screen

  2. Enter a username, email address, and password

  3. Click "Create an Account"

Screenshot showing where the create account button is on the NPM website.

Logging into npm#

To associate our package with our account on npm we need to log in to npm on our computer. In your terminal run yarn login. You will be prompted to enter your npm username and email.

Screenshot showing the yarn login command.


Yarn uses the command yarn publish to push our package to the npm package registry (A package is a directory containing a package.json file). yarn publish will push all files to the registry except in two cases. First, if a .gitignore file exists, the publish command will not include any ignored files. Second, we can also create a .npmignore file to exclude files from the package registry. Having a .npmignore file is useful for cases when you want to include files in source control, but not in the published code.

Scroller contains files that we need during development, but users won't need them when they're consuming Scroller. So, we'll add a .npmignore file. .npmignore files have the same new-line separated file format as .gitignore files do. At the root of Scroller, create a .npmignore file and add the following lines:

When Scroller publishes to npm, both the .storybook and esbuild.js files are left out of publishes to the package registry.

Updating package.json#

There is one more update we need in our package.json to make Scroller publishable. Below is the current state of Scroller's package.json.

As it stands, our package's entry point is src/index.js. We need to update package.json to include both our CJS and ESM modules, in dist/, as entry points to the package. By default, npm looks for a main property in the package.json file. We can also define a module property for tooling that supports ESM modules. Let's update package.json to expose our code bundled by ESBuild.

Now when someone installs Scroller, and imports it using const scroller = require("scroller"); or import { scroller } from "scroller";, npm will be pointing to the index.js and index.mjs files respectively in our dist/ directory.


This page is a preview of Creating React Libraries from Scratch

Start a new discussion. All notification go to the author.