All Articles

Extracting a React JS component and publishing it on NPM

So, you’ve created an awesome React JS component and want to share it with other developers. That’s awesome! In this post, I’ll show you how to do that.

Let’s not waste time. The first thing you should do is to create an NPM account. It’s free and you can do it right here.

Extracting a React JS component and publishing it on NPM

Preparing the app

How this is going to work

While extracting a component from your app you need to understand that this code will live in another repository, so the development will be done separately from now on.

Let’s assume that your app is in /code/app/ and your component at /code/app/src/components/Button.js

The first thing you must do is move this folder to another place, out of your app repository.

mkdir -p /code/awesome-btn/src
mv /code/app/src/components/Button.js /code/awesome-btn/src/index.js

Initialize an NPM package

Now we need to initialize an NPM package. To do that go to your new component folder and type npm init

NPM will ask some questions about your package, such as name, version, description, etc …

NOTE: when NPM asks about script entry point, type build/index.js

Modify the component package.json file

In order to publish a react component, we need to add some packages in the package.json file.

Just copy and paste what is different from the file below.

{
  "name": "awesome-btn",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "author": "Hugo Dias",
  "license": "MIT",
  "peerDependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "babel-runtime": "^6.26.0"
  },
  "dependencies": {
    "react-scripts": "1.1.4"
  }
}

Create a webpack.config.js file

To keep our development process working, we need to add webpack to this component, so we can build the code.

Create a webpack.config.js file in /code/awesome-btn/webpack.config.js

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

And a .babelrc file

{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}

Nice! We are almost done.

Run yarn or npm i to install the dependencies.


After we push the component to NPM we don’t want to publish the package on every change to test it, right?

To avoid all this work we gonna use npm link to use our component locally and speed up the development.

Building

The component must be built before we can use it, so just type npm run build and you’re good to go.

NOTE: When you’re developing the component use npm run start so webpack can watch the files and build on every change.

Linking

Go to /code/awesome-btn and hit npm i. After that, npm link If everything worked as expected you should see a message like this on your terminal:

/usr/local/lib/node_modules/awesome-btn -> /Users/your-name/code/awesome-btn

Now go to your app ( cd /code/app ) and hit npm link awesome-btn

You should see a message like this:

/Users/your-name/code/app/node_modules/awesome-btn -> /usr/local/lib/node_modules/awesome-btn -> /Users/your-name/code/awesome-btn

Sweet! The app and component are now linked!


Using the component

Everything is linked, so now we can use our component!

Open your app code and change all the places where your component has been called.

Change from:

import Button from "./components/Button"

To:

import Button from "awesome-btn"`

And BOOM! Your awesome-btn component is ready to use as an NPM package.

The last thing you need to do is to publish it on NPM — which is the easiest part 😆

On your component folder type, npm publish. NPM will ask for your login and password :)