Categories
tech

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?

create-react-app

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": [
      ">0.2%",
      "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": [
      "@babel/react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/john/my-app.git"
  },
  "author": "John",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/John/my-app/issues"
  },
  "homepage": "https://john.github.io/my-app/"
}

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

  • Register an account on npm.com
  • 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.

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": [
    "css",
    "es",
    "lib",
    "umd"
  ],
  "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": "https://john.github.io/react-component/",
  "license": "MIT",
  "repository": "https://github.com/Jogn/react-component.git",
  "keywords": [
    "react-component",
    "react",
  ],
}

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 

Conclusion

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 https://altalogy.com/blog/category/tech/

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
ReactJS Training in Bangalore Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
ReactJS Training in Bangalore
Guest

There is definately a lot to know about this issue. I like all the points you’ve made.