Skip to content

Latest commit

 

History

History
152 lines (119 loc) · 6.33 KB

FAQ.md

File metadata and controls

152 lines (119 loc) · 6.33 KB
Raw

Frequently Asked Questions

What does "nwb" stand for?

Shortness and ease of typing.

It uses Node.js, Webpack and Babel to build apps for the web and modules for npm.

nwb sounded like the best combination of those and was easy to type.

How can I view the configuration nwb generates?

Set the DEBUG environment variable to nwb before running to check what generated configuration looks like:

# *nix
export DEBUG=nwb
# Windows
set DEBUG=nwb

If you need to prevent server commands from clearing scrollback so you can read any unexpected error logging which is happening, pass a --no-clear flag when running the development server:

# When running nwb via npm scripts
npm start -- --no-clear
# When running nwb serve directly
nwb serve --no-clear

How do I enable CSS Modules?

Use webpack.rules config in nwb.config.js to configure css-loader in the default stylesheet rule with the necessary css-loader options:

module.exports = {
  webpack: {
    rules: {
      css: {
        modules: true,
        localIdentName: (
          process.env.NODE_ENV === 'production'
            ? '[path][name]-[local]-[hash:base64:5]'
            : '[hash:base64:5]'
        )
      }
    }
  }
}

If you only need CSS Modules for some of the stylesheets you'll be importing, you can configure custom stylesheet rules.

What can I configure to reduce bundle size?

Disable default polyfills

If you don't need the Promise, fetch and Object.assign polyfills nwb provides by default, configuring polyfill: false (or passing a --no-polyfill flag when using Quick Development commands) will shave ~4KB off the gzipped vendor bundle.

Enable cherry-picking for destructuring imports

If you're using destructuring imports with libraries like React Router and React Bootstrap (e.g. import {Button} from 'react-bootstrap'), you're bundling the whole library, instead of just the bits you need.

Try configuring babel.cherryPick for these libraries to only bundle the modules you actually use.

How can I copy non-JavaScript files when building a React component/library?

Pass a --copy-files flag if you have other files which you want to copy to build directories, such as CSS and JSON files.

How can I use React Hot Loader instead of React Transform?

React Transform is deprecated in favour of React Hot Loader, but nwb is still using the former as it can be activated entirely via the configuration nwb manages, whereas React Hot Loader requires a component to be added to your app.

  • npm install react-hot-loader

  • Disable use of React Transform by passing a --no-hmre flag to the serve command you're using. e.g. in your app's package.json:

    {
  "scripts": {
    "start": "nwb serve-react-app --no-hmre",
  }
}

  • Provide the Babel and Webpack config React Hot Loader requires in your nwb.config.js:

    module.exports = function({command}) {
  let config = {
    type: 'react-app'
  }
  // Only include react-hot-loader config when serving a development build
  if (command.startsWith('serve')) {
    config.babel = {plugins: 'react-hot-loader/babel'}
    config.webpack = {
      config(webpackConfig) {
        // React Hot Loader's patch module needs to run before your app
        webpackConfig.entry.unshift('react-hot-loader/patch')
        return webpackConfig
      }
    }
  }
  return config
}

  • Use React Hot Loader's <AppContainer> component in your app's entry module (usually src/index.js in apps using nwb) as per its Getting Started docs.

How can I debug using VS Code when using nwb?

Ensure you have the Debugger for Chrome extension installed and add the following configurations to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Dev Server",
      "request": "launch",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
    },
    {
      "name": "Debug Karma Tests",
      "request": "launch",
      "runtimeArgs": ["--headless"],
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceRoot}/src/*",
        "webpack:///tests/*": "${workspaceRoot}/tests/*"
      },
      "type": "chrome",
      "url": "http://localhost:9876/debug.html",
    }
  ]
}

Note: the above configuration assumes you're using the default host and port settings, and that the requested dev server port was available.

After you've started the dev server with npm start or nwb serve, or started a watching test server with npm run test:watch or nwb test --server, you should be able to start debugging in VS Code by running a debugging configuration from the Debug panel or pressing F5.