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
⚛️Preact-PWA - a boilerplate to build fast progressive web applications with Preact & Vitejs

⚛️ pheralb/preact-pwa is a boilerplate to build fast progressive web applications with Preact & Vitejs. ?? Demo - Cloudflare Pages. ?? Gett

Pablo Hdez 6 Oct 29, 2022
Zero configuration Preact widgets renderer in any host DOM

Preact Habitat A 900 Bytes module for that will make plugging in Preact components and widgets in any CMS or website as fun as lego! Demos Login Widge

Zouhir ⚡️ 496 Dec 5, 2022
Bootstraps a Preact Island project with no configuration

?? Preact Island Starter Bootstraps a Preact Island project with no configuration. Features ?? Multi entry point builds by default. Make all the islan

Marcus Wood 20 Nov 21, 2022
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Kai Hotz 239 Dec 29, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Preact 511 Dec 29, 2022
Remix + Preact for SSR, Preact + Islands + On Demand Compilation for client side interactions.

Welcome to Remix! Remix Docs Development From your terminal: npm run dev This starts your app in development mode, rebuilding assets on file changes.

Jacob Ebey 11 Oct 27, 2022
React Native Typescript Template with scalable design and cutting edge technologies like CodePush, Sentry and other libraries pre-configured to save your time.

A React Native Template/Boilerplate containing the best practices and scalable design with cutting edge technologies like CodePush/Sentry and all other neccessary libraries pre-configured and basic helper functions and components to help you save your time and make your App super fast.

KASHAN HAIDER 23 Dec 1, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

Buck DeFore 462 May 22, 2022
Brownie-next-mix - Everything you need to use NextJS with Brownie

Brownie NextJS Mix This mix comes with everything you need to start using NextJS

Rafael Abuawad 9 Jun 20, 2022
This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

yuzhou 102 Nov 21, 2022
Vanilla JSX + HTML + CSS compiler and static-site generator (SSG)

VANIL Vanilla JSX + HTML + CSS compiler and static-site generator (SSG) VANIL is a compiler and static site generator (SSG) that combines TSX/JSX+HTML

Aron Homberg 6 Nov 17, 2022
Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla

Vite Electron Builder Boilerplate Vite+Electron = ?? This is a template for secure electron applications. Written following the latest safety requirem

Alex Kozack 1.5k Jan 4, 2023
My personal portfolio where you can find my top projects and other details. I have used react to develop this website.

Portfolio website Reactjs Browse My React js responsive Portfolio source code above. You can easily clone this Portfolio website with Suraj Sahu's cod

Suraj Sahu 5 Oct 18, 2022
winwiz1 157 Dec 28, 2022
A simple, delicate and modern template for who anyone need portfolio

A simple, delicate and modern template for who anyone need portfolio

Abdullah Öztürk 6 Sep 19, 2022
Gab 3 Mar 5, 2022
A react hook for uploading large files that need chunking.

React Chunked Uploader A react hook for uploading large files that need chunking (for example for uploading to Cloudinary). It uses axios and provides

Raffi Dilanchian 7 Nov 21, 2022
Enjoy React, Redux, and React-Router, with zero build configuration.

react-redux-starter-kit This is yet another single page web application template using React. However, this project attempts to balance simplicity wit

cloudmu 352 Nov 29, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022