Skip to content

Latest commit

 

History

History
111 lines (85 loc) · 4.26 KB

FAQ.md

File metadata and controls

111 lines (85 loc) · 4.26 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?

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