nwb is a development tool for React apps and components, and plain JavaScript web apps and npm modules.
It's effectively a frontend for Babel, Webpack and Karma, which allows you to get started with these tools without having to learn them up-front, and to use them together in a common way across your projects without copying dependencies and configuration.
nwb provides development commands for:
- creating static builds for apps, including production optimisations for React apps
- creating ES5, UMD and ES6 module builds for React components and other npm modules
- serving React apps and component demos with hot module reloading and syntax/
render()error overlays - serving plain JavaScript web apps with auto-reloading on code changes and syntax error overlays
- running unit tests with code coverage
nwb owns the dependencies for development tools so you don't have to copy the same devDependencies between projects and deal with keeping them up to date yourself.
It also dynamically generates configuration, so you don't have to copy configuration boilerplate between projects, while an nwb.config.js file allows you to tweak configuration to suit your project.
To speed up developing new projects, nwb can also generate skeleton projects which are ready for deployment or publishing out of the box, and are preconfigured for running unit tests on Travis CI.
Installing globally gives you an nwb command:
npm install -g nwb
Create a new React app and start a hot reloading development server which automatically installs missing dependencies from npm when they're required:
$ nwb new react-app github-issues
...
nwb: installing dependencies
...
$ cd github-issues
$ nwb serve --auto-install
nwb: serve-react-app
nwb: dev server listening at http://localhost:3000
...
Create a new React component module and start hot reloading its demo app:
$ nwb new react-component react-thing
? Do you want to create a UMD build for npm? Yes
? Which global variable should the UMD build export? ReactThing
? Do you want to create an ES6 modules build for npm? Yes
...
nwb: installing dependencies
...
$ cd react-thing
$ nwb serve
nwb: serve-react-demo
nwb: dev server listening at http://localhost:3000
...
Create a new web app and start a development server which reloads on every change:
$ nwb new web-app secret-prototype
...
$ cd secret-prototype
$ nwb serve --reload
nwb: serve-web-app
nwb: dev server listening at http://localhost:3000
...
Create a new web module without being asked any questions and run tests on every change as you develop it:
$ nwb new web-module get-form-data -f
...
$ cd get-form-data
$ nwb test --server
nwb: test
...
react-nwb-github-issues is a clone of the ember-cli github-issues-demo demo app, showing development of a React app from scratch using nwb.
Selected commits of interest:
- The skeleton React app created by
nwb new react-app - Installing a CSS preprocessor plugin - nwb automatically detects and uses CSS preprocessor plugins from your dependencies
- Installing a dependency which manages and
require()s its own CSS dependency - the CSS and its image/font dependencies were hot reloaded into the running app when this change was made
Note: this example app initially tries to stick close to the original version commit-by-commit for the sake of comparison, by using async-props, which is currently in pre-release.
react-yelp-clone takes the app created in the Build a Yelp Clone React tutorial and uses nwb for its development tooling, with a custom nwb.config.js to support the same setup.
Check out the diff to see the effect using nwb has on the amount of devDependencies and configuration which needs to be managed.
nwb v0.7 added an --auto-install flag to nwb serve which automatically installs and saves missing dependencies from npm.
Just after nwb v0.6 was released, someone on Reactiflux asked this question:
hey guys, i need to prove a concept quickly, i need a boilerplate with react and some kind of mobile ui framework like ratchet, does anyone know of a good boilerplate like that?
This video shows the resulting example of using nwb to create a new React project, installing Ratchet from npm and using its CSS, and using the nwb config file to configure Babel with a plugin to make it more convenient to copy and paste HTML samples from Ratchet's docs:
Usage:
nwb <command> [options]
Options:
-h, --help display this help message
-v, --version print nwb's version
Project creation commands:
init <project_type> [name]
initialise a project in the current directory
new <project_type> <name>
create a project in a new directory
Positional arguments:
project_type project type - see the list below
name project name [default: current directory name]
Options:
-f, --force force project creation, don't ask questions
-g, --global global variable name to export in the UMD build
--no-jsnext disable npm ES6 modules build
--no-umd disable npm UMD module build
--react version of React to install for React apps & components
Project types:
react-app a React app
react-component a React component module with a demo app
web-app a plain JavaScript app
web-module a plain JavaScript module
Generic development commands:
Positional arguments for these commands depend on the type of project they're
being run in. See the applicable project-type-specific commands below.
build
clean and build the project
clean
delete built resources
serve
serve an app, or a component's demo app, with hot reloading
Options:
--auto-install auto install missing npm dependencies
--fallback serve the index page from any path
--host hostname to bind the dev server to [default: localhost]
--info show webpack module info
--port port to run the dev server on [default: 3000]
--reload auto reload the page if hot reloading fails
test
run unit tests
Options:
--coverage create a code coverage report
--server keep running tests on every change
Project-type-specific commands:
build-demo
build a demo app from demo/src/index.js to demo/dist/
build-module
create an ES5 build for an npm module (ES6 modules build requires config)
build-react-app [entry] [dist_dir]
build a React app from entry to dist_dir
build-umd [entry]
create a UMD build for an npm module from entry (requires config)
build-web-app [entry] [dist_dir]
build a web app from entry to dist_dir
clean-app [dist_dir]
delete dist_dir
clean-demo
delete demo/dist/
clean-module
delete coverage/, es6/ and lib/
clean-umd
delete umd/
serve-react-app [entry]
serve a React app from entry
serve-react-demo
serve a React demo app from demo/src/index.js
serve-web-app [entry]
serve a web app from entry
Positional arguments:
entry entry point [default: src/index.js]
dist_dir build output directory [default: dist/]
Since Semantic Versioning v2.0.0 specifies...
Major version zero (
0.y.z) is for initial development. Anything may change at any time. The public API should not be considered stable.
...you can technically follow both SemVer and Sentimental Versioning at the same time.
This is what versions mean during nwb's initial development:
-
0.yversions are majorish, anything may change - always read the CHANGES file or GitHub release notes to review what's changed before upgrading.Where possible, any changes required to the nwb config file format will be backwards-compatible in the
0.yversion they're introduced in, with a deprecation warning when the old format is used. Support for the old format will then be dropped in the next0.yrelease. -
0.y.zversions are minorish, and may contain bug fixes, non-breaking changes, minor new features and non-breaking dependency changes.I will be pinning my own projects' nwb version range against these - e.g.
"nwb": "0.7.x"- but if in doubt, pin your dependencies against an exact version.
Version 1.0.0 defines the public API. The way in which the version number is incremented after this release is dependent on this public API and how it changes.
Operating system icons created with Icons8
