A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)



Linux Travis Windows Appveyor npm package Coveralls


nwb is a toolkit for:

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


Installing globally provides an nwb command for quick development and working with projects.

npm install -g nwb

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":

npm install --save-dev nwb
  "scripts": {
    "start": "nwb serve-react-app",
    "build": "nwb build-react-app"

Quick Development

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

import React, {Component} from 'react'

export default class App extends Component {
  render() {
    return <h1>Hello world!</h1>
$ nwb react run app.js
✔ Installing react and react-dom
Starting Webpack compilation...
Compiled successfully in 5033 ms.

The app is running at http://localhost:3000/
$ nwb react build app.js
✔ Building React app

File size after gzip:

  dist\app.cff417a3.js  46.72 KB

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 use nwb for development:

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

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:

nwb new preact-app my-app

Inferno Apps

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

nwb new inferno-app my-app

Vanilla JavaScript Apps

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

nwb new web-app my-app

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

nwb new web-module my-module

cd my-module/

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



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 of devDependencies 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

  • Babel 7

    Babel 7


    • [x] Compatibility issues with babel-plugin-inferno
    • [x] Drop use of loose mode, as extending built-ins works as expected now, but breaks with loose mode
    • [x] babel-plugin-react-transform doesn't work with Babel 7 and is deprecated - switch to react-hot-loader
    • [x] Issue with babel-plugin-add-module-exports for ES5 builds: https://github.com/59naga/babel-plugin-add-module-exports/issues/61
    • [x] stage-X presets are being removed - created a babel-preset-proposals preset we'll use to handle this instead
    • [x] plugin-transform-runtime removed its moduleName option https://github.com/babel/babel/pull/8266
      • Workaround would be to require local installation of @babel/runtime - we could do this automatically for quick commands

    Nice to have

    • [x] Hot Module Replacement - babel-plugin-react-transform doesn't work with Babel 7 and is deprecated.

      Replaced with react-hot-loader (which also supports patching component methods defined with class properties! \o/) and react-hot-loader-loader to mark the main app module for hot reloading without having to add it to your app code.

    • [ ] render() error handling - babel-plugin-react-transform did this really nicely, but it's been removed from the latest react-hot-loader, so you need to deal with render() errors yourself by wrapping with your own error boundary.

      Also not sure if error boundaries preserve state and allow for recovery by fixing render(), which is where babel-plugin-react-transform's HMR handling came in handy when working deep in a component tree.

      Could try using https://github.com/smooth-code/error-overlay-webpack-plugin as a guide to integrating create-react-app's error overlay (does it allow for recovery or it is one-and-done?)

    enhancement dependencies 
    opened by insin 17
  • Update to babel 6

    Update to babel 6

    This is a WIP for #12. Currently, there is a bit of duplication on the babel presets used for the different builds, we can definitely do something smarter.

    I chose to use the following presets for babel:

    • es2015
    • react
    • stage-2 (mainly for the spread syntax)
    opened by geowarin 16
  • PostCSS error in version 0.15.8

    PostCSS error in version 0.15.8

    This issue is a: Bug Report

    • [x] Bug report
    • [ ] Feature request
    • [ ] Question / support request
    • [ ] Other

    Got the following error for any given css file after upgrade to 0.15.8 from 0.15.6:

    Module build failed: TypeError: Cannot read property 'postcss' of null
        at Processor.normalize (/Users/xxx/node_modules/postcss/lib/processor.js:136:12)
        at new Processor (/Users/xxx/node_modules/postcss/lib/processor.js:51:25)
        at postcss (/Users/xxx/node_modules/postcss/lib/postcss.js:73:10)
        at /Users/xxx/node_modules/postcss-loader/index.js:122:16
        at process._tickCallback (internal/process/next_tick.js:103:7)
    opened by kirill-konshin 15
  • Allow to pass useable styles option to style loader

    Allow to pass useable styles option to style loader

    This issue is a: Feature request.

    • [ ] Bug report
    • [x] Feature request
    • [ ] Question / support request
    • [ ] Other


    Currently this option is not supported by NWB.

    opened by kirill-konshin 13
  • Sass files with react-component missing after build

    Sass files with react-component missing after build

    I recently started to work with Sass and wanted to share some common components between projects by making a collection. I therefore created a react-component module from nwb.

    Now I'm in the situation where I would like to share the collection between my projects. Therefore I wanted to make a build with the build script of nwb. I initially thought I would get complete components with css, however it would also not be a problem if it were still the scss files (I import them in other projects which have sass configuration anyway) however in the output there are no scss files.

    Is there a special setting necessary for build in order to keep the sass files in the build?

    opened by arddor 13
  • Loaders should be configurable

    Loaders should be configurable

    This issue is a: Bug report.

    • [x] Bug report
    • [ ] Feature request
    • [ ] Question / support request
    • [ ] Other

    As mentioned in #294 providing loader in config leads to unexpected results:

      style: {
        loader: require.resolve('css-loader/useable'),
        options: {modules: true}


    [ { loader: '/boilerplate/node_modules/style-loader/index.js',
         { loader: '/boilerplate/node_modules/style-loader/useable.js', modules: true } },

    Following two configs produce same results:

    css: {options: {modules: true}}
    css: {modules: true}
    opened by kirill-konshin 12
  • Changing loaders

    Changing loaders

    This issue is a:

    • [ ] Bug report
    • [x] Feature request
    • [x] Question / support request
    • [ ] Other

    I want to change the loaders used for SVG images. Basically I want to SVG's to be inlined, so that I can change the fill color etc. Am I correct in assuming that it isn't possible right now?

    module.exports = () => {
      return {
        type: 'react-app',
        webpack: {
          rules: {
            svg: {
              use: ['svg-inline-loader?classPrefix, image-webpack-loader'] // <-- this doesn't work
          extra: {
            resolve: {
              modules: [path.resolve(__dirname, 'src'), 'node_modules']
            module: {
              rules: [
                  // This will add the rule as the last entry in the Webpack config, but doesn't do anything
                  // It doesn't overwrite the current rule for svg :(
                  test: /\.svg$/,
                  use: ['svg-inline-loader?classPrefix, image-webpack-loader']
    bug enhancement 
    opened by TimonVS 11
  • Is there a way to import CSS styles into a component?

    Is there a way to import CSS styles into a component?

    I'm using nwb to create isolated React components. Some of these components require CSS styling.

    How can I import an scss stylesheet while developing, and how can I package it for production during the build process?


    enhancement help wanted 
    opened by hackingbeauty 11
  • maintenance of NWB library

    maintenance of NWB library

    This issue is a:

    • Other

    Hello! NWB is such an important library those days where the devop changes frequently and become a complicated yet essential part of the development. I loved that you covered many technology stacks (web, preact, react....) and that you abstract the implementation details yet support the common formats (es modules, umd, lib).

    I wanted to ask about the maintenance status of this library as it is been a while since you released new version or pushed new commits, there are deprecation and security warnings on libraries that are used by nwb and issues are not getting attentions.

    This is not a criticism, I know how hard it is to try and be on top of all those issues/updates etc. But I would appreciate your answer about the near future planned effort on this library. When are you planning to fix all those deprecations / security issues and release new version?

    Thanks! Eran.

    opened by esakal 10
  • Library/multi-component example?

    Library/multi-component example?

    This issue is a:

    • [ ] Bug report
    • [ ] Feature request
    • [x] Question / support request
    • [ ] Other

    I wanted to create a react component library and saw that the docs mention this is possible, but only offers react-bootstrap as an example, which doesn't have the nwb.config files.

    Is there a simple example of how to get this working with multiple components in the src file? What would I have to do with the nwb.config file to get multiple components built for distribution?

    opened by mklemme 10
  • Need `proxy` support

    Need `proxy` support

    In react app development, I usually call remote api in same domain, but the real api server runs on other process/port. So I need a proxy config like this:

    module.exports = {
      webpack: {
        proxy: {
          '/api/': {
            target: 'http://www.myhost.com/api/'

    The proxy is a webpack config, I can access http://localhost:3000/api/test to forward to my api server. Expect nwb to support that.

    enhancement help wanted 
    opened by cpunion 10
  • fresh nwb new react-component compilation crashes

    fresh nwb new react-component compilation crashes

    This issue is a: Bug report

    # using latest published nwb v0.25.2
    $ npx nwb new react-component my-component
    $ cd my-component
    $ npm install
    $ npm start
    Failed to compile with 1 error.
     ERROR  in ./demo/src/index.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    TypeError: /tmp/gg/my-component/demo/src/index.js: pass.get(...) is not a function
        at Object.post (/tmp/gg/my-component/node_modules/@babel/plugin-transform-react-jsx/lib/transform-classic.js:48:47)
        at buildElementCall (/tmp/gg/my-component/node_modules/@babel/helper-builder-react-jsx/lib/index.js:167:12)
        at PluginPass.exit (/tmp/gg/my-component/node_modules/@babel/helper-builder-react-jsx/lib/index.js:53:24)
        at newFn (/tmp/gg/my-component/node_modules/@babel/traverse/lib/visitors.js:181:21)
        at NodePath._call (/tmp/gg/my-component/node_modules/@babel/traverse/lib/path/context.js:53:20)
        at NodePath.call (/tmp/gg/my-component/node_modules/@babel/traverse/lib/path/context.js:40:17)
        at NodePath.visit (/tmp/gg/my-component/node_modules/@babel/traverse/lib/path/context.js:109:8)
        at TraversalContext.visitQueue (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:105:16)
        at TraversalContext.visitMultiple (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:74:17)
        at TraversalContext.visit (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:131:19)
        at traverseNode (/tmp/gg/my-component/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
        at NodePath.visit (/tmp/gg/my-component/node_modules/@babel/traverse/lib/path/context.js:107:52)
        at TraversalContext.visitQueue (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:105:16)
        at TraversalContext.visitSingle (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:79:19)
        at TraversalContext.visit (/tmp/gg/my-component/node_modules/@babel/traverse/lib/context.js:133:19)
        at traverseNode (/tmp/gg/my-component/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
     @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ReactRefreshEntry.js (webpack)-dev-server/client?/ ./node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/ErrorOverlayEntry.js (webpack)/hot/only-dev-server.js ./demo/src/index.js main[4]

    it's caused by https://github.com/babel/babel/commit/b1e73d6f961065c56427ffa89c130beea8321d3b#diff-3670f8045f2c739225a4da543e477ae1fca436a1ab52d5fdbee5771bf5f51b2c

    A workaround is to use "@babel/helper-builder-react-jsx": "7.16.7" in mycomponent/package.json

    Apparently transform classic was removed in 7.12 so usng helper-builder-react-jsx 7.12+ with transform-react-jsx 7.9 is unsupported anyway, and more dependencies versions should be pinned in nwb ?

    opened by jonenst 1
  • Testing.md Documentation Broken Link

    Testing.md Documentation Broken Link

    opened by furugoorin 0
  • Release with phantom dependencies removed?

    Release with phantom dependencies removed?

    Hi, I realized that the most recent version on npm, v0.25.2, still uses phantom but in the master branch of this repo, changes have been made to remove phantom and use Chrome headless. When will these changes be included in a release on npm? I have a project that must use Chrome headless so I am very much relying on this new release. Thank you.

    opened by fnandoz21 0
  • [QUESTION]how to ignore stories.js files from ./src when performing nwb build-react-component

    [QUESTION]how to ignore stories.js files from ./src when performing nwb build-react-component

    I searched numbers of articles in google and read through their doc(https://github.com/insin/nwb/blob/master/docs/Commands.md#nwb-build) and issues, I can't find anything. but my nwb build brings in .stories.js files into the ./dist directory after built. I store stories.js files alone side my component files in ./src for easier access and update stories.

    I can't find any relevant config can somehow ignore the stories.js files in src file so they won't be generated when I run command like following: nwb build-react-component --copy-files --no-demo

    Any idea or suggestions?

    opened by adamchenwei 1
  • Avoid NextJS module import error

    Avoid NextJS module import error

    This issue is a:

    • Question / support request

    nwb v0.25.2 node v14.17.0 npm v6.14.13 react v17.0.2

    I'm using nwb to build a React component that I've uploaded to a private github repo. I've included the component on regular React projects with no problem. However, NextJS is giving me an error because I'm using CSS modules in the component:


    NextJS seems to think that I'm using the source files rather than the built ones, but that's not correct - the folder for the component in my /node_modules/ folder contains the /lib/ folder with the built files (but they are using module imports).

    How can I build the component in a way that satisfies NextJS?

    opened by MikeWillisFC 0
  • v0.25.2(May 20, 2020)

  • v0.25.1(May 19, 2020)

  • v0.25.0(May 19, 2020)

    Breaking Changes

    • Node.js 8 is no longer supported; Node.js 10.13.0 is now the minimum required version, as per many of nwb's dependencies.

    Browser Support


    • Deprecated using a string for webpack.autoprefixer config to configure supported browsers - this will no longer do anything and should be moved to the new browsers config.

    • Removed support for babel.stage and webpack.uglify config deprecated in nwb v0.24.0.

    • copy-webpack-plugin v6.0.0 has breaking changes to its options which you should read if you're using webpack.copy config.

      In particular, the ignore option in a copy pattern must now be put inside the new globOptions option.




    • autoprefixer: v9.7.6 → v9.8.0
    • chalk: v3.0.0 → v4.0.0
    • copy-webpack-plugin: v5.1.1 → v6.0.1
    • file-loader: v4.3.0 → v6.0.0
    • fs-extra: v8.1.0 → v9.0.0
    • karma: v4.4.1 → v5.0.9
    • karma-mocha: v1.3.0 → v2.0.1
    • terser-webpack-plugin v2.3.6 → v3.0.1
    • url-loader: v2.3.0→ v4.1.0
    Source code(tar.gz)
    Source code(zip)
  • v0.24.7(May 16, 2020)


    • Fixed inclusion of __source and __self debugging information when transpiling JSX in react-component projects by defaulting process.env.NODE_ENV to 'production' when building.


    Source code(tar.gz)
    Source code(zip)
  • v0.24.6(May 12, 2020)


    • @babel/core: v7.90 → v7.9.6
    • @babel/plugin-transform-runtime: v7.9.0 → v7.9.6
    • @babel/preset-env: v7.9.0 → v7.9.6
    • @babel/runtime: v7.9.2 → v7.9.6
    • @pmmmwh/react-refresh-webpack-plugin: v0.2.0 → v0.3.1
    • autoprefixer: v9.7.5 → v9.7.6
    • cross-spawn: v7.0.1 → v7.0.2
    • css-loader: v3.4.2 → v3.5.3
    • html-webpack-plugin: v3.2.0 → v4.3.0
    • karma-coverage: v2.0.1 → v2.0.2
    • mocha: v7.1.1 → v7.1.2
    • ora: v4.0.3 → v4.0.4
    • react-refresh: v0.8.1 → v0.8.2
    • resolve: v1.15.1 → v1.17.0
    • semver: v7.1.3 → v7.3.2
    • style-loader: v1.1.3 → v1.2.1
    • terser-webpack-plugin v2.3.5 → v2.3.6
    • webpack: v4.42.1 → v4.43.0
    • webpack-dev-server: v3.10.3 → v3.11.0
    Source code(tar.gz)
    Source code(zip)
  • v0.24.5(Mar 24, 2020)

    0.24.5 / 2020-03-24


    • html-webpack-plugin got a major version bump to v4
      • Output HTML is now minified by default - you can disable this by configuring html.minification = false.
      • Chunk sorting was removed, but it seems to work as before for the ordering of the JavaScript files generated by nwb's build.
      • The plugin nwb uses to inline the webpack runtime chunk was rewritten to use v4's new hooks.


    • The lang attribute on <html> wasn't getting set to the default 'en' when using the nwb react, nwb preact and nwb inferno quick development commands.


    • @babel/plugin-transform-react-jsx: v7.9.1 → v7.9.4
    • @babel/preset-react: v7.9.1 → v7.9.4
    • @babel/runtime: v7.9.0 → v7.9.2
    • autoprefixer: v9.7.4 → v9.7.5
    • html-webpack-plugin: v3.2.0 → v4.0.1
    • webpack: v4.42.0 → v4.42.1
    Source code(tar.gz)
    Source code(zip)
  • v0.24.4(Mar 21, 2020)

    0.24.4 / 2020-03-21



    • Updated to Babel v7.9.0.
    • Validate that the entry module for quick commands (e.g. nwb react run SomeComponent.js) exists, to avoid a confusing error message [#441]


    • @babel/core: v7.8.7 → v7.9.0
    • @babel/plugin-transform-react-constant-elements: v7.8.3 → v7.9.0
    • @babel/plugin-transform-react-jsx: v7.8.3 → v7.9.1
    • @babel/plugin-transform-runtime: v7.8.3 → v7.9.0
    • @babel/preset-env: v7.8.7 → v7.9.0
    • @babel/preset-react: v7.8.3 → v7.9.1
    • @babel/runtime: v7.8.7 → v7.9.0
    • babel-loader: v8.0.6 → v8.1.0
    • mocha: v7.1.0 → v7.1.1
    • react-refresh: v0.8.0 → v0.8.1
    Source code(tar.gz)
    Source code(zip)
  • v0.24.3(Mar 13, 2020)

  • v0.24.2(Mar 12, 2020)

    0.24.2 / 2020-03-12


    • Fixed copying of co-located .test.js/.spec.js files when building a React component or web module by also passing the new --no-copy-ignored flag when calling @babel/cli [#529]


    • inquirer: v7.0.6 → v7.1.0
    • minimist v1.2.0 → v1.2.4 - security fix
    • open: v7.0.2 → v7.0.3
    Source code(tar.gz)
    Source code(zip)
  • v0.24.1(Mar 11, 2020)

    0.24.1 / 2020-03-11


    • Fixed serving the demo app for a React component [#542]
    • Fixed Fast Refresh for the default React component demo app by exporting the Demo component in the template.
    Source code(tar.gz)
    Source code(zip)
  • v0.24.0(Mar 8, 2020)

    0.24.0 / 2020-03-08 ♀️

    Breaking Changes

    • Node.js 6 is no longer supported; Node.js 8.9.0 is now the minimum required version, as per many of nwb's dependencies.

    • Updated to Babel 7

      • babel.runtime config no longer accepts a String to enable an additional, named feature.

        Pass an Object with plugin options instead.

      • Support for tests in *-test.js files has been removed, as @babel-core no longer supports pattern matching them to ignore them when co-located in src/.

        Rename these to *.test.js instead.

    • Dropped support for the old --no-hmre alias to disable Hot Module Replacement, just use --no-hmr instead.

    • Updated Preact config for Preact X.

    • Dependencies with (documented) breaking changes:



    • Fix creation of an extra directory when creating a scoped component's UMD build [#513] [rrapiteanu]


    • React Refresh Webpack Plugin is now used to enable Fast Refresh for React apps, as babel-plugin-react-transform is deprecated and doesn't support Babel 7.
    • Replaced use of UglifyJsPlugin with TerserWebpackPlugin.
    • React compatibility is now always configured for Preact apps, as preact/compat is now part of the preact module.


    • Deprecated babel.stage config, as Babel's stage-X presets were/are being removed in Babel 7 - if you provide it, nwb will warn you and enable Babel proposal plugins equivalent to the current stage they're at.

      Use babel.proposals config instead if you want to toggle some or all additional proposal plugins on.

    • Deprecated webpack.uglify config, which has been renamed to webpack.terser.

    • Autoprefixer renamed its browsers option to overrideBrowserslist, so you will get deprecation warnings if you were using {browsers: ...} in webpack.autoprefixer config.


    • autoprefixer: v9.0.2 → v9.7.4
    • babel-plugin-add-module-exports: v0.2.1 → v1.0.2
    • babel-plugin-inferno: v5.0.1 → v5.1.0
    • case-sensitive-paths-webpack-plugin: v2.1.2 → v2.3.0
    • chalk: v2.4.1 → v3.0.0
    • copy-webpack-plugin: v4.5.2 → v5.1.1
    • cross-spawn: v6.0.5 → v7.0.1
    • css-loader: v1.0.0 → v3.4.2
    • detect-port: v1.2.3 → v1.3.0
    • figures: v2.0.0 → v3.2.0
    • filesize: v3.6.1 → v6.1.0
    • file-loader: v1.1.11 → v4.3.0
    • fs-extra: v7.0.0 → v8.1.0
    • glob: v7.1.3 → v7.1.6
    • gzip-size: v5.0.0 → v5.1.1
    • inquirer: v6.0.0 → v7.0.6
    • karma: v2.0.0 → v4.4.1
    • karma-chrome-launcher: v2.2.0 → v3.1.0
    • karma-coverage: v1.1.2 → v2.0.1
    • karma-webpack: v3.0.0 → v4.0.2
    • mini-css-extract-plugin v0.4.1 → v0.9.0
    • mocha: v5.2.0 → v7.1.0
    • opn: v5.3.0 → open v7.0.2
    • ora: v3.0.0 → v4.0.3
    • postcss-loader: v2.1.6 → v3.0.0 - dropped Node.js 4 support
    • promise: v8.0.1 → v8.1.0
    • resolve: v1.8.1 → v1.15.1
    • semver: v5.5.1 → v7.1.3
    • style-loader: v0.21.0 → v1.1.3
    • uglifyjs-webpack-plugin v1.2.7 → terser-webpack-plugin v2.3.5
    • url-loader: v1.0.1 → v2.3.0
    • webpack: v4.16.4 → v4.42.0
    • webpack-dev-middleware: v3.1.3 → v3.7.2
    • webpack-dev-server: v3.1.5 → v3.10.3
    • webpack-hot-middleware: v2.22.3 → v2.25.0
    • webpack-merge: v4.1.4 → v4.2.2
    • whatwg-fetch: v2.0.4 → v3.0.0
    Source code(tar.gz)
    Source code(zip)
  • v0.23.0(Aug 3, 2018)

    Breaking Changes

    • Updated Inferno config for Inferno 5 - inferno-* packages (such as inferno-compat) work again with Webpack 4 [#440]


    • Added prepublishOnly to react-component and web-module project package.json scripts, which invokes npm run build prior to publishing [#436] [hanford]
    • Added npm.umd.entry config to specify a different entry point for the UMD build in npm module projects. Currently, the UMD build requires an entry point which must have a default export [#411]


    • Always add CopyPlugin when webpack.copy config is provided [#431]
    • Remove use of object destructuring from render shims - fixes output of quick build commands in IE11 [#453]


    • autoprefixer: v8.1.0 → v9.0.2
    • babel-core: v6.26.0 → v6.26.3
    • babel-loader: v7.1.4 → v7.1.5
    • babel-plugin-inferno: v4.0.0 → v5.0.1
    • babel-plugin-istanbul: v4.1.5 → v4.1.6
    • babel-plugin-transform-decorators-legacy: v1.3.4 → v1.3.5
    • chalk: v2.3.2 → v2.4.1
    • copy-template-dir: v1.3.0 → v1.4.0
    • copy-webpack-plugin: v4.5.1 → v4.5.2
    • css-loader: v0.28.10 → v1.0.0
    • detect-port: v1.2.2 → v1.2.3
    • filesize: v3.6.0 → v3.6.1
    • fs-extra: v6.0.0 → v7.0.0
    • gzip-size: v4.1.0 → v5.0.0 - dropped Node.js 4 support
    • html-webpack-plugin: v3.0.6 → v3.2.0
    • inquirer: v5.1.0 → v6.0.0
    • karma: v2.0.0 → v2.0.5
    • karma-coverage: v1.1.1 → v1.1.2
    • karma-webpack: v2.0.13 → v3.0.0
    • mini-css-extract-plugin v0.2.0 → v0.4.1
    • mocha: v5.0.4 → v5.2.0
    • opn: v5.2.0 → v5.3.0
    • ora: v2.0.0 → v3.0.0
    • postcss-loader: v2.1.1 → v2.1.6
    • resolve: v1.5.0 → v1.8.1
    • run-series: v1.1.6 → v1.1.8
    • style-loader: v0.20.2 → v0.21.0
    • uglifyjs-webpack-plugin: v1.2.3 → v1.2.7
    • webpack: v4.1.1 → v4.16.4
    • webpack-dev-middleware: v3.0.1 → v3.1.3
    • webpack-dev-server: v3.1.1 → v3.1.5
    • webpack-hot-middleware: v2.21.2 → v2.22.3
    • webpack-merge: v4.1.2 → v4.1.4
    • whatwg-fetch: v2.0.3 → v2.0.4


    Source code(tar.gz)
    Source code(zip)
  • v0.22.0(Mar 12, 2018)

    Breaking Changes

    • Node.js 4 is no longer supported; Node.js 6.11.5 is now the minimum required version, as per Webpack 4 [#400]
    • Updated to Webpack 4 - if you were customising your build with nwb.config.js, some of the nwb config you depended on may have changed, and the options Webpack accepts may have changed [#409]
      • Webpack's new mode option is now set to activate Webpack 4's new defaults, which removes the need for a bunch of manual configuration nwb was doing:
        • ModuleConcatenationPlugin is now automatically enabled in production mode instead of being explicitly configured, so nwb's webpack.hoisting config has been removed.
        • NamedModulesPlugin is now automatically used in development mode instead of being explicitly configured.
        • Development UMD builds for modules now use production mode with minimization disabled, as the new development mode defaults are unsuitable for code which will be published to npm.
      • Webpack's optimization options are now used for certain pieces of configuration:
        • optimization.noEmitOnErrors is used instead of NoEmitOnErrorsPlugin to prevent emission of assets when using Hot Module Replacement.
        • UglifyJS is now configured via optimization.minimize/optimization.minimizer instead of just adding UglifyJsPlugin directly to plugins.
        • CommonsChunkPlugin has been removed in Webpack 4 - optimization.runtimeChunk is now configured to create a runtime chunk (which replaces the old manifest chunk) and optimization.splitChunks is configured to create a vendor bundle.
      • Replaced used of ExtractTextPlugin with MiniCssExtractPlugin:
        • Separate CSS files are now created and loaded on-demand for code splits.
        • Replaced webpack.extractText config with webpack.extractCSS config - this is not backwards-compatible, as plugin options differ.
      • Webpack's default performance option size warnings have been disabled (for now).
    • Updated Inferno config for Inferno v4 - see the Inferno v4 migration guide for breaking changes [#429]
      • nwb new inferno-app now asks if you want to install inferno-compat as it's no longer a single dependency, defaulting to not installing it.
    • nwb new preact-app now asks if you want to install preact-compat, defaulting to not installing it.
    • Updated to Mocha 5, which dropped support for IE9 and IE10 and fixed some false positives.
    • Removed support for deprecated webpack.compat.enzyme, webpack.compat.sinon and webpack.style = 'old' config.

    Known Issues


    • Added an -f/--force flag to nwb new to accept defaults and skip questions.


    • The dev server's fallback index.html serving can now be configured with dot arguments - e.g. pass --fallback.disableDotRule if you need to use dots in your path when using the HTML5 History API.
    • --no-polyfill can now be used to disable default polyfills for app projects as well as quick commands.


    • autoprefixer: v7.2.5 → v8.1.0
    • babel-loader: v7.1.2 → v7.1.4
    • babel-plugin-inferno: v3.3.1 → v4.0.0
    • case-sensitive-paths-webpack-plugin: v2.1.1 → v2.1.2
    • chalk: v2.3.0 → v2.3.2
    • copy-webpack-plugin: v4.3.1 → v4.5.1
    • cross-spawn: v6.0.4 → v6.0.5
    • css-loader: v0.28.9 → v0.28.10
    • extract-text-webpack-plugin v3.0.0 → mini-css-extract-plugin v0.2.0
    • filesize: v3.5.11 → v3.6.0
    • inquirer: v3.3.0 → v5.1.0 - latest version requires Node.js 6
    • karma-webpack: v2.0.9 → v2.0.13
    • mocha: v4.1.0 → v5.0.4
    • npm-install-webpack-plugin v4.0.5 → @insin/npm-install-webpack-plugin v5.0.0 - Webpack 4 compatibility
    • ora: v1.3.0 → v2.0.0
    • postcss-loader: v2.0.10 → v2.1.1
    • style-loader: v0.20.1 → v0.20.2 - skip empty url()s
    • uglifyjs-webpack-plugin: v1.1.8 → v1.2.3
    • url-loader: v0.6.2 → v1.0.1
    • webpack: v3.10.0 → v4.1.1
    • webpack-dev-middleware: v1.12.2 → v3.0.1
    • webpack-dev-server: v2.9.7 → v3.1.1
    • webpack-hot-middleware: v2.21.0 → v2.21.2
    • webpack-merge: v4.1.1 → v4.1.2


    • Updated StatusPlugin and InlineRuntimePlugin to use the Use the new Webpack 4 .hooks plugin API.


    Source code(tar.gz)
    Source code(zip)
  • v0.21.5(Feb 1, 2018)

  • v0.21.4(Jan 31, 2018)


    • Fixed validation of webpack.compat locale properties [#425]
    • Fixed false negative when checking if the port is available when devServer.port is specified as a String [#423]


    • uglifyjs-webpack-plugin: v1.1.6 → v1.1.8 - reduce memory consumption
    Source code(tar.gz)
    Source code(zip)
  • v0.21.3(Jan 27, 2018)

  • v0.21.2(Jan 17, 2018)

  • v0.21.1(Jan 12, 2018)


    • Fixed validation of webpack.extractText = false config, which disables extraction of imported stylesheets into .css files [#418]


    • postcss-loader: v2.0.9 → v2.0.10
    • uglifyjs-webpack-plugin: v1.1.5 → v1.1.6
    Source code(tar.gz)
    Source code(zip)
  • v0.21.0(Jan 3, 2018)

    Breaking Changes

    • Validation of the configuration object provided by nwb.config.js files has been expanded, so previously valid config files may now be invalid [#136]
      • Unexpected properties in top-level configuration or in babel, karma, npm and webpack configuration (i.e. anything that's not documented in the Configuration docs) are now treated as errors [#193]
      • Basic type checking is now performed for all documented configuration properties.
      • After upgrading, run nwb check-config to check your configuration file.
    • Updated to UglifyJSPlugin 1.x, which supports ES2015 syntax and adds options to enable filesystem caching and use multiple processes to improve build speed, which nwb enables by default [#412]
      • Review any custom webpack.uglify config you have against the new version's options documentation - options for UglifyJS itself must now be passed as an uglifyOptions object and some of UglifyJS' default options have changed.
    • Node.js 4.8.0 is now the minimum required version, based on the engines config of nwb's dependencies.

    nwb.config.js Config Changes

    • Deprecated the webpack.compat.sinon flag for Sinon 1.x compatibility settings, as subsequent major versions since July 2017 support Webpack out of the box.


    • Fixed testing React component/library and web module projects when using export extensions - the Babel stage preset wasn't being defaulted to preset-stage-1, which includes the export extensions plugin [#364]


    • Added an --open flag to open the app in your default browser or in a named browser (e.g. --open="Google Chrome") after starting a Webpack dev server [#334]
    • You can now provide a babel.config() function which will be given the generated Babel config to do whatever it wants with.
    • You can now provide a karma.config() function which will be given the generated Karma config to do whatever it wants with [#408]



    • autoprefixer: v7.1.6 → v7.2.4
    • babel-plugin-inferno: v3.3.0 → v3.3.1
    • copy-webpack-plugin: v4.2.1 → v4.3.1
    • file-loader: v1.1.5 → v1.1.6
    • gzip-size: v4.0.0 → v4.1.0
    • karma: v1.7.1 → v2.0.0
    • karma-webpack: v2.0.6 → v2.0.9
    • mocha: v4.0.1 → v4.1.0
    • postcss-loader: v2.0.8 → v2.0.9
    • style-loader: v0.19.0→ v0.19.1
    • webpack: v3.8.1 → v3.10.0
    • webpack-dev-server: v2.9.4 → v2.9.7
    • webpack-dev-middleware: v1.12.0 → v1.12.2
    • webpack-hot-middleware: v2.20.0 → v2.21.0


    • Added missing docs for webpack.copy config
    • Added more headings to the Commands docs to make them easier to browse, and to make feature flags such as --copy-files for component builds more visible [#407]
    Source code(tar.gz)
    Source code(zip)
  • v0.20.0(Nov 18, 2017)

    Breaking Changes

    • Updated UMD build config to export the default export of the entry point, rather than an ES modules interop object which looks something like {__esModule: true, default: Getter}, which was unintended behaviour. This will break any existing usage of UMD builds which depended on manually accessing the unintended default property [#402]
    • Updated to Mocha 4, which comes with a number of breaking changes. These are mostly related to dropping support for older versions of Node.js and non-ES5-compliant browsers.


    • Bump the default React peerDependency version for react-component projects to 16.x - fixes creating components with npm 2.


    • copy-webpack-plugin: v4.2.0 → v4.2.1
    • detect-port: v1.2.1 → v1.2.2
    • karma-webpack: v2.0.5 → v2.0.6
    • mocha: v3.4.2 → v4.0.1 - dropped support for old versions of Node.js and non-ES5-compliant browsers


    • Documented --unsafe-perm workaround for PhantomJS' postinstall step failing on some OSes when installing globally with npm 5 [#383]
    Source code(tar.gz)
    Source code(zip)
  • v0.19.2(Nov 8, 2017)

    0.19.2 / 2017-11-09


    • Backed out use of preact/debug in favour of preact/devtools, as the debug module tries to override the preact module's render export, which fails due to Webpack enforcing the read-only nature of ES module exports.
    Source code(tar.gz)
    Source code(zip)
  • v0.19.1(Nov 3, 2017)

    0.19.1 / 2017-11-04

    nwb.config.js Config Changes

    • Deprecated the webpack.compat.enzyme flag for Enzyme v2 compatibility settings. Upgrade to Enzyme v3 when you can, which supports React all the way back to v0.13.


    • Added 'createClass' and 'createReactClass' to the factory function names React Transform looks for, so React component hot reloading will work for apps using create-react-class, imported as one of those names.


    • nwb is now also tested against Node 8 now that it's the Long Term Support version.
    • Reverted the Webpack settings change for webpack.compat.enzyme config in v0.19.0, as it only applied while the version numbers of published React packages were out of sync. The compatibility settings assume Enzyme v2 and React >= v15.5.
    • style-loader's new hmr option is set to false when creating builds to prevent inclusion of its HMR code.


    • autoprefixer: v7.1.4 → v7.1.6
    • babel-plugin-inferno: v3.2.0 → v3.3.0
    • babel-plugin-transform-react-remove-prop-types: v0.4.8 → v0.4.10
    • babel-preset-env: v1.6.0 → v1.6.1
    • copy-webpack-plugin: v4.1.0 → v4.2.0
    • extract-text-webpack-plugin: v3.0.0 → v3.0.2
    • file-loader: v1.1.4 → v1.1.5
    • filesize: v3.5.10 → v3.5.11
    • karma-mocha-reporter: v2.2.4 → v2.2.5
    • karma-webpack: v2.0.4 → v2.0.5
    • phantomjs-prebuilt: v2.1.15 → v2.1.16
    • postcss-loader: v2.0.6 → v2.0.7
    • resolve: v1.4.0 → v1.5.0
    • style-loader: v0.18.2 → v0.19.0
    • url-loader: v0.5.9 → v0.6.2
    • webpack: v3.6.0 → v3.8.1
    • webpack-dev-server: v2.9.1 → v2.9.4
    • webpack-hot-middleware: v2.19.1 → v2.20.0
    • webpack-merge: v4.1.0 → v4.1.1
    Source code(tar.gz)
    Source code(zip)
  • v0.19.0(Oct 2, 2017)

    0.19.0 / 2017-10-02

    Breaking Changes

    • Removed hooking of React, Preact and Inferno render() functions in quick commands, as this won't work with ES modules builds (which are used by default in Webpack v3). This affected the current version of Preact at the time of writing.
      • If you're manually using render() with quick commands, you must now handle providing the target DOM node too - document.getElementById('app') is available in the default HTML template.



    • Now using babel-preset-env instead of deprecated babel-preset-es201X presets [#375]
    • Use beautify: true for webpack.debug output so code split bundles are readable.


    • autoprefixer: v7.1.2 → v7.1.4
    • babel-cli: v6.24.1 → v6.26.0
    • babel-core: v6.24.1 → v6.26.0
    • babel-loader: v7.1.1 → v7.1.2
    • babel-plugin-istanbul: v4.1.4 → v4.1.5
    • babel-plugin-react-transform: v2.0.2 → v3.0.0 - add React.PureComponent to the list of default super classes
    • babel-plugin-transform-react-remove-prop-types: v0.4.6 → v0.4.8
    • babel-polyfill: v6.23.0 → v6.26.0
    • babel-runtime: v6.25.0 → v6.26.0
    • copy-webpack-plugin: v4.0.1 → v4.1.0
    • css-loader: v0.28.4 → v0.28.7
    • file-loader: v0.11.2 → v1.1.4
    • gzip-size: v3.0.0 → v4.0.0 - async interface now uses Promises
    • html-webpack-plugin: v2.29.0 → v2.30.1
    • inquirer: v3.2.1 → v3.3.0
    • karma-mocha-reporter: v2.2.3 → v2.2.4
    • karma: v1.7.0 → v1.7.1
    • mocha: v3.4.2 → v3.5.3
    • phantomjs-prebuilt: v2.1.14 → v2.1.15 - fix security issues with dependencies
    • webpack-dev-middleware: v1.11.0 → v1.12.0
    • webpack-dev-server: v2.6.1 → v2.9.1
    • webpack-hot-middleware: v2.18.2 → v2.19.0
    • webpack: v3.4.1 → v3.6.0
    Source code(tar.gz)
    Source code(zip)
  • v0.18.10(Jul 27, 2017)

  • v0.18.9(Jul 26, 2017)

    0.18.9 / 2017-07-26


    • Now using preact/debug instead of preact/devtools in quick Preact commands and the Preact project skeleton - requires Preact >= 8.2.0


    • inquirer: v3.2.0 → v3.2.1
    • promise: v8.0.0 → v8.0.1
    • webpack: v3.2.0 → v3.4.0 - bug fixes; now watches for missing directories being added; perf improvements
    • webpack-dev-server: v2.5.1 → v2.6.1
    Source code(tar.gz)
    Source code(zip)
  • v0.18.8(Jul 16, 2017)

  • v0.18.7(Jul 12, 2017)

  • v0.18.6(Jul 10, 2017)

  • v0.18.5(Jul 9, 2017)

    0.18.5 / 2017-07-09


    • extract-text-webpack-plugin: v3.0.0-beta.3 → v3.0.0-rc.1
    • karma-webpack: v2.0.3 → v2.0.4 - Webpack 3 support
    • webpack-dev-server: v2.5.0 → v2.5.1 - Webpack 3 support
    Source code(tar.gz)
    Source code(zip)
  • v0.18.4(Jul 7, 2017)

    0.18.4 / 2017-07-07


    • Fixed use of @import in CSS by adding ident back to postcss-loader config [#311]
    • Fixed config validation error being thrown when using webpack.styles config for custom preprocessor plugin rules [#342]
    • Fixed display of valid properties when an invalid property is used when configuring a custom webpack.styles rule.


    • Added webpack.debug config to trigger creation of a more debuggable production build [#336]

      The recommended way to use this is via a config argument:

      npm run build -- --webpack.debug
    • Added support for the following arguments when building a React component's demo:

      • --title - set the generated demo index.html's <title>
      • --vendor - enable creation of a vendor bundle for modules imported from node_modules/ [#335]


    • autoprefixer: v7.1.1 → v7.1.2
    • babel-loader: v7.1.0 → v7.1.1 - don't read .babelrc for cache identifier when babelrc=false (nwb uses this option)
    • chalk: v1.1.3 → v2.0.1
    • extract-text-webpack-plugin: v2.1.2 → v3.0.0-beta.3 - Webpack 3 support
    • html-webpack-plugin: v2.28.0 → v2.29.0 - Webpack 3 support
    • karma-chrome-launcher: v2.1.1 → v2.2.0
    • webpack: v3.0.0 → v3.1.0 - perf boost; fix ordering in ExtractTextPlugin
    • webpack-hot-middleware: v2.18.0 → v2.18.2
    Source code(tar.gz)
    Source code(zip)
Jonny Buchanan
Programmer/web developer from Northern Ireland living in Australia, making things with JavaScript and Flutter
Jonny Buchanan
Next Boilerplate with TypeScript, Redux Toolkit and Styled-Component.. For now

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Ibrahim Yaacob 2 Feb 17, 2022
✨ Create server-rendered universal JavaScript applications with no configuration

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yours

Jared Palmer 10.9k Sep 22, 2022
DEPRECATED - A front-end template that helps you build fast, modern mobile web apps.

Deprecation Note Mobile Boilerplate is no longer maintained. Please use HTML5 Boilerplate as a decent starting point for your project. Mobile Boilerpl

H5BP 3.9k Sep 6, 2022
A professional front-end template for building fast, robust, and adaptable web apps or sites.

HTML5 Boilerplate HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. This project is t

H5BP 53.3k Sep 18, 2022
Starting a new JS app? Build, test and run advanced apps with kyt 🔥

kyt Every sizable JavaScript web app needs a common foundation: a setup to build, run, test and lint your code. kyt is a toolkit that encapsulates and

The New York Times 1.9k Sep 17, 2022
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.5k Sep 23, 2022
Web applications with node.js and React

Electrode Web Applications with node.js and React The Electrode project was developed to make node.js and React the primary tech choices for developin

Electrode 2.1k Sep 22, 2022
Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You can download or clone it to speed up your projects.

mcrn-event-booking-app-starter Hi there! This is a react native starter which used to build a awesome Event Booking App based on the Figma design. You

Roy Chen 37 Aug 18, 2022
This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the back end implementation and there is the React implementation as the front end

Versão em português MERN stack This is a template project demonstrating how the MERN stack(Mongo, Express, React, Node) can be used, here we have the

Douglas Samuel Gonçalves 2 Jan 22, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Sep 22, 2022
An experiment in building a public facing personal knowledge web app with TiddlyWiki and Nodejs.

Maarfapad What is this? Maarfapad was my attempt at learning Expressjs back in 2016 while building a CRUD app to handle TiddlyWiki html files. It was

A.B. Samma 3 Mar 12, 2022
Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use.

Webplate Framework Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really e

Chris Humboldt 559 Aug 17, 2022
Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Node Express Template (NET.ts) - a small template project which help you to speed up the process of building RESTful API

Przemek Nowicki 18 Aug 17, 2022
An example of a mobile-first responsive web design

Mobile-First-RWD This demo is an example of a mobile-first responsive web design. This is a companion demo to the tutorial I wrote on HTML5 Rocks and

Brad Frost 67 Jan 27, 2022
Set up a modern web app by running one command.

Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

Facebook 97k Sep 18, 2022
A boilerplate for Node.js web applications

Hackathon Starter Live Demo: https://hackathon-starter.walcony.com Jump to What's new? A boilerplate for Node.js web applications. If you have attende

Sahat Yalkabov 33.7k Sep 20, 2022
The next small thing in web development, powered by Svelte

sapper The next small thing in web development, powered by Svelte. What is Sapper? Sapper is a framework for building high-performance universal web a

Svelte 7.2k Sep 22, 2022
DDD/Clean Architecture inspired boilerplate for Node web APIs

Node API boilerplate An opinionated boilerplate for Node web APIs focused on separation of concerns and scalability. Features Multilayer folder struct

Talysson de Oliveira Cassiano 3k Sep 19, 2022
⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`

⚡️ create-next-pwa A cross-platform Node.js based CLI tool that creates Progressive Web App (PWA) with Next.js. You can also integrate tailwind with t

Saad Irfan ⚡️ 63 Sep 15, 2022