nwb

A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and...

insin/nwbnwb

README

nwb


A zero-config development setup is provided, 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 quick development and working with projects.

  1. ```sh
  2. npm install -g nwb
  3. ```

Note: if you're using npm 5 and getting an EACCES: permission denied error from nwb's PhantomJS dependency while installing globally, try passing an --unsafe-perm flag:

npm install -g --unsafe-perm nwb


To use nwb's tooling in a project, install it as a devDependency and use nwb commands in package.json "scripts":

  1. ```sh
  2. npm install --save-dev nwb
  3. ```

  1. ```json
  2. {
  3.   "scripts": {
  4.     "start": "nwb serve-react-app",
  5.     "build": "nwb build-react-app"
  6.   }
  7. }
  8. ```

Quick Development


For quick development with React, Inferno, Preact or vanilla JavaScript, use thenwb react, nwb inferno, nwb preact or nwb webcommands.

  1. ```js
  2. import React, {Component} from 'react'

  4. export default class App extends Component {
  5.   render() {
  6.     return <h1>Hello world!</h1>
  7.   }
  8. }
  9. ```

  1. ```sh
  2. $ nwb react run app.js
  3. ✔ Installing react and react-dom
  4. Starting Webpack compilation...
  5. Compiled successfully in 5033 ms.

  7. The app is running at http://localhost:3000/
  8. ```

  1. ```sh
  2. $ nwb react build app.js
  3. ✔ Building React app

  5. File size after gzip:

  7.   dist\app.cff417a3.js  46.72 KB
  8. ```

See Quick Development with nwb for a more detailed guide.

React Apps


Use nwb new react-app to create a React app skeleton, preconfigured with npm scripts which usenwb for development:

  1. ```sh
  2. nwb new react-app my-app
  3. cd my-app/
  4. npm start
  5. ```

Open 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.

Preact Apps


Use nwb new preact-app to create a Preact app skeleton:

  1. ```sh
  2. nwb new preact-app my-app
  3. ```

Inferno Apps


Use nwb new inferno-app to create an Inferno app skeleton:

  1. ```sh
  2. nwb new inferno-app my-app
  3. ```

Vanilla JavaScript Apps


Use nwb new web-app to create a vanilla JavaScript app skeleton:

  1. ```sh
  2. nwb new web-app my-app
  3. ```

React Components and Libraries


  1. ```sh
  2. nwb new react-component my-component

  4. cd my-component/
  5. ```

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, ES 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


  1. ```sh
  2. nwb new web-module my-module

  4. cd my-module/
  5. ```

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

Guides


- Quick Development with nwb
- Developing React Apps with nwb
- Developing React Components and Libraries with nwb

Why use nwb?


Get started quickly. Start developing from a single .js file or generate a project skeleton.

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 ofdevDependencies and configuration to be managed in a real project it was dropped into.

MIT Licensed


Cover image created by GeorgioWan

Operating system icons created with Icons8