nwb

nwb provides tooling in a single devDependency for developing, testing and building:

React Apps
React Components and Libraries
npm Modules for the Web

A zero-config development setup is provided for these projects, but nwb also supports configuration and plugin modules which add extra functionality (e.g. Sass support), should you need them

Install

Installing globally provides an nwb command for creating new projects and a react command for quick prototyping:

npm install -g nwb

To use nwb for build tooling in an existing project, install it as a devDependency and use nwb commands in its package.json "scripts":

npm install --save-dev nwb

React Apps

Creating an App

nwb new react-app my-app
cd my-app/
npm start

Open http://localhost:3000, start editing the code and changes will be hot-reloaded into the running app.

npm test will run the app's tests and npm run build will create a production build.

See Developing React Apps with nwb for a more detailed guide.

Quick Prototyping

If you want to do some React prototyping without setting anything up, use the react command.

Create a module which renders a React app into <div id="app">:

app.js:

import React, {Component} from 'react'
import {render} from 'react-dom'

class App extends Component {
  render() {
    return <h1>Hello worlds!</h1>
  }
}

render(<App/>, document.getElementById('app'))

Use react run to start a hot-reloading development server at http://localhost:3000.

react run app.js

react build app.js will create a production build.

React Components and Libraries

nwb new react-component my-component

cd my-component/

npm start will run a demo app you can use to develop your component or library against.

npm test will run the project's tests and npm run build will create ES5, ES6 modules and UMD builds for publishing to npm.

See Developing React Components and Libraries with nwb for a more detailed guide.

npm Modules for the Web

nwb new web-module my-module

cd my-module/

npm test will run the project's tests and npm run build will create ES5, ES6 modules and UMD builds for publishing to npm.

Why use nwb?

Get started quickly. Start developing a React app from a single .js file or generate a starter project.

Covers the whole development cycle. Development tools, testing and production builds for projects work out of the box, no configuration required.

Flexible. While everything works out of the box, you can also use an optional configuration file to tweak things to your liking.

Manages key development dependencies and configuration for you. Check out an example of the effect using nwb had on the amount of devDependencies and configuration to be managed in a real project it was dropped into.

MIT Licensed

Operating system icons created with Icons8

codeinabox/nwb

nwb