Publish a React Component to NPM

4 minutes

In this article I’m going to walk you through the process of creating the simplest boilerplate environment there is, so you can publish your own React components to NPM. We will use Rollup to achieve this.

What is Rollup(quickly)

Rollup is a module bundler for JavaScript which compiles your code into a single bundle. It can also do more complex and sophisticated things such as creating libraries or applications.

Source

If you just want the basic Rollup boilerplate source.

If want to see an example check this repository where I build a highly useless custom Hook for adding and looping a set of emojis in the title of you app.

First we create a folder and init a package.json file.

mkdir awesome-rollup
cd awesome-rollup
npm init -y

Then we have to install a couple of dependencies.

npm install @babel/core @babel/preset-env @babel/preset-react react rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-commonjs --save-dev

After installing all of our dependencies we create a rollup.config.js in our root directory.

import resolve from "rollup-plugin-node-resolve"
import babel from "rollup-plugin-babel"
import commonjs from "rollup-plugin-commonjs"
import pkg from "./package.json"

export default {
  input: "package/index.js",
  output: {
    file: pkg.main,
    format: "cjs",
  },
  external: ["react"],
  plugins: [
    babel({
      exclude: "node_modules/**",
    }),
    resolve(),
    commonjs(),
  ],
}

Remember we are aiming for the simplest boilerplate there is. There are a lot of options you can add depending your packages size and complexity. Check the Rollup official documentation for the full list and how to configure them.

Then we have to set some Babel presets. Babel presets are configuration details placed in a .babelrc file where we are setting the environment we want our code to be transpiled to. We want React so our file looks like this.

{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}

In our package folder with the index.js as our export point we include all of our code.

import React from "react"

const NPMComponent = () => {
  return <div>Hello, Rollup</div>
}

export { NPMComponent }

Note: Exporting in brackets without default, in our application the import will look something like this.

import { NPMComponent } from "basic-rollup-boilerplate"

You do this if you have a collection of components that you what to use throughout an application.

But if you set the export as default …

. . .
export default NPMComponent

import will look like this

import NPMComponent from "basic-rollup-boilerplate"

If we choose this way we have to set our exports as auto in our output object.

. . .
  output: {
    file: pkg.main,
    format: 'cjs',
    exports: 'auto'
  },
. . .

Lastly before testing our package in our package.json we set our build command that will compile and minify our code into a single bundle.

. . .
"scripts": {
    "build": "rollup -c"
 },
. . .

Now if we run npm run build in our terminal we get the bundle in our dist folder. Pretty cool uh?

Test and Publish

We can test our package locally before we publish it to NPM. By running npm link you create a symlink in your global node_modules folder that links to your package. Then you head to another project and type npm link -package name-.

After checking that all is good we are ready to publish our package.

Make sure that your package name is available in npmjs.com.

Assuming you already have an account you can npm login to connect to npmjs.com.

Then run npm publish and you are of to the races.

If you want to make updates to you packages you can run npm version -type- where type could either be:

Note: NPM won’t let you publish again with the same version.

That was it.

I think this is a good starter setup to get the gist of it all.

Now off you go and make things.