How to create a react npm package – CRA vs NWB

Ok, so you have a great idea for React npm package, you want to publish it and let others use it, what are your options?

The most obvious and common choice is a famous create-react-app by Facebook but is it the best choice for lib/npm package? If you check CRA readme file you can find a line:

If you need to publish a React component consider using nwb it can also do this, as well as Neutrino’s react-components preset.

create-react-app readme file
Create-react-app vs NWB

How to publish npm?


At the beginning, we have to install and setup our project

$ npm install -g create-react-app
$ npx create-react-app my-app
$ npm start

Now it’s your time to shine, you can write code of your future npm package and later go to the next step and prepare configuration for publishing project on NPM.

First, edit package.json:

  • Add following line to scripts section
"publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files"

This script recreates the /dist folder, builds React application, and stores files in /dist directory. (The flag –copy-files ensures that not only JS files are copied)

  • Change private from true to false
  "private": false,
  • add babel react presets to your project with
$ npm install babel-preset-react-app --save-dev
  • Create a file named .babelrc with the following content:
	"presets": ["react-app"]
  • Update information about the license, author, version, etc.

Finally, package.json should look like this:

  "name": "my-app",
  "version": "1.0.0",
  "private": false,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "publish:npm": "set NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/AltaMap --out-dir dist --copy-files",
    "docs": "react-scripts build && rm -rf docs && mv build docs",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  "eslintConfig": {
    "extends": "react-app"
  "browserslist": {
    "production": [
      "not dead",
      "not op_mini all"
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
  "description": "My app description",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "babel": {
    "presets": [
    "plugins": [
          "loose": true
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4"
  "repository": {
    "type": "git",
    "url": "git+"
  "author": "John",
  "license": "MIT",
  "bugs": {
    "url": ""
  "homepage": ""

Now, you can publish your first NPM package. To achieve this you have to:

  • Register an account on
  • Login with your npm login in console
  • Transpile code from ES6 to ES5 with
$ npm run publish:npm
  • use npm publish
$ npm publish

And voilà! That’s all, you’ve just created a brand new npm package. We hope it will have many downloads!

Now let’s try to the same but using NWB.


First of all, installation! 

$ npm install -g nwb
$ nwb new react-app || nwb new react-component
$ npm start

NWB can be used to create:

  • a new application with
$ nwb new react-app
  • or plain component with
$ nwb new react-component

Now its time for development!

After adding files and setting up the project, go to package.json and check your project name, author, etc.

Next, update details about the project (i.e. license, author, homepage, etc.) the package.json. Here is a sample package.json for NWB:

  "name": "react-component",
  "version": "1.0.0",
  "description": "React Component",
  "main": "lib/index.js",
  "module": "es/index.js",
  "files": [
  "scripts": {
    "build": "nwb build-react-component",
    "clean": "nwb clean-module && nwb clean-demo",
    "prepublishOnly": "npm run build",
    "start": "nwb serve-react-demo",
    "test": "nwb test-react",
    "test:coverage": "nwb test-react --coverage",
    "test:watch": "nwb test-react --server"
  "dependencies": {
  "peerDependencies": {
    "react": "16.x"
  "devDependencies": {
    "nwb": "0.23.x",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  "author": "John",
  "homepage": "",
  "license": "MIT",
  "repository": "",
  "keywords": [

The next, but not last step is to prepare the project to publish on NPM.

$ npm run prepublishOnly 

prepublishOnly will prepare the component to publication.

  • An ES modules build in es/
  • A CommonJS build in lib/
  • and UMD development and production builds in umd/

But what about the CSS files? The build only creates JS files but if you need to copy some non-JavaScript files you have to pass an --argument to indicate all additional arguments and use --copy-files

$ npm run build -- --copy-files 

The last step is publishing:

$ npm publish 


Create react app and NWB have many common points but still there’re some differences!

  • NWB has much easier package.json configuration
  • CRA requires to install and configure babel and add scripts in package.json when NWB is configured and ready to go
  • In NWB we can create react-component without creating a whole single page application
  • You can use NWB with React, Inferno, Preact or vanilla JavaScript

Of course, there’s no winner here, it all depends on t you need and what do you want to achieve. If you want to build a SPA – stay with create-react-app, but if want to build and publish npm package NWB is your best shot IMHO!

Check out different tech posts on our blog

Subscribe to get the latest case studies on building digital products

Leave a Reply

5 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
Irgi zanuarRich BraunBachelor of Interior Program Telkom UniversityAnonymousBachelor of Accounting Program Telkom University Recent comment authors
newest oldest most voted
Notify of
Bachelor of Accounting Program Telkom University

Thanks, I have recently been looking for info about this topic for ages and yours is the best I’ve discovered so far.


are you sure or

Bachelor of Interior Program Telkom University

thank you for sharing, what’s next?

Rich Braun

Very helpful article, thanks! It led me to this straightforward solution for publishing a component library from my existing create-react-app project: 1) Define these in package.json: "main": "./build/index.js", "module": "./build/index.js", "devDependencies": { "@babel/cli": "^7.14.3", "@babel/core": "^7.14.3", "@babel/preset-env": "^7.14.4", "@babel/preset-react": "^7.13.13", "commander": "^7.2.0", ... }, "scripts": { ... "transpile": "NODE_ENV=production npx babel --out-dir ../build --relative --copy-files src", }, "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, The “npm transpile ; npm publish commands should now work. 2) Due to the issue described here ( by Utku Gultopu, users of yarn will need to do this beforehand to fully upgrade from babel… Read more »

Irgi zanuar

Informasi yang sangat bermanfaat, terimakasih

-Irgi Zanuar

Visit Us