React.js FAN: Quickly start a new React application using nwb.

Having written several React-based applications, it feels nowadays quite boring whenever I want to start a new React-based project. I need to set up webpack, webpack-dev-server, Babel (with several presets and plugins), Karma, React, several loaders for JSON, CSS, image files and font files — and integrate all these stuff together.
An alternative would be to use a boilerplate, but many boilerplates have a lot of stuff I don’t need (e.g. Router or Redux or server-side rendering) and lacking the things I need (e.g. CSS loaders and unit-testing). Not to mention that different projects have different configuration needs.
Also, things change really fast these days, and a boilerplate gets out of date pretty quickly. Once you created an app with the boilerplate, it is on you to keep your dependencies up-to-date. I’ve been upgrading dependencies for several different projects now and it’s a lot of grunt work.
But these days I tend to use nwb. Here’s how:

Step 1. Install nwb.

$ npm install -g nwb

Step 2. Use nwb to create a new React application.

$ nwb new react-app scoreboard

Step 3. Look inside.

$ cd scoreboard

Let’s see…

$ ls
README.md nwb.config.js public tests
node_modules package.json src

There’s no webpack.config.js, .babelrc, or karma.conf.js in there. All configuration is done in nwb.config.js. So let’s have a look:

$ cat nwb.config.js
module.exports = { type: 'react-app' }

The configuration looks very minimal! We only need to tell it that we’re building a React app, and it will generate a sensible defaults.

Let’s look at package.json.

$ cat package.json
{
"name": "scoreboard",
"version": "1.0.0",
"description": "Describe scoreboard here",
"private": true,
"scripts": {
"build": "nwb build",
"clean": "nwb clean",
"start": "nwb serve",
"test": "nwb test"
},
"dependencies": {
"react": "0.14.x",
"react-dom": "0.14.x"
},
"devDependencies": {
"nwb": "0.7.x"
},
"author": "",
"license": "MIT",
"repository": ""
}

Our only dependencies are react and react-dom.
Our only devDependencies is just nwb. No webpack, Karma, and Babel stuff — these are all managed by nwb. nwb itself has a lot of tests to make sure that all these stuff work together in a coherent way.

Step 4. Start the server

$ npm start -- --auto-install
[...]
nwb: serve-react-app
nwb: dev server listening at http://localhost:3001
webpack built a98e92c8c4d34bae8856 in 2791ms

This will fire up webpack-dev-server.
Try changing the files. You will see that webpack and Babel is already configured to hot-reload React components.
Try requiring some modules from npm (e.g. `import Rx from ‘rx’`). With the ` — auto-install` flag, when you save the file, it will install the missing dependencies and adds it to your package.json file.
Try creating a CSS file and import it. webpack is already configured with a proper CSS loader and with autoprefixer.
Setting all that up manually would take me a lot of time.

Step 5. Run the tests.

$ npm test -- --server --coverage
[...]
SUMMARY:
✔ 1 test completed

It runs Karma, integrated with webpack and coverage measurement.
With the ` — server` flag, the tests are re-run when you save the file.
With the ` — coverage` flag, code coverage report is generated. You can install an editor plugin so that you can see which lines are covered by tests, and which lines are not.

Finally, run `npm run build`.

This will generate static assets. JavaScript and CSS from node_modules go into vendor.js, and vendor.css; while code from your app goes into app.js and app.css. Source maps are generated in a separate .map file. You can then upload them to your webserver.

I’ve used nwb in several projects now.

wonderstudio is depending on (an earlier version of) nwb. At that time configuration in nwb is somewhat limited, so although it works 90% out-of-the-box, I need to monkeypatch it to be able to configure webpack the way I want. nwb’s author has expressed his intentions to allow more flexibility in configuration.
Most of recent JS libraries I wrote also uses nwb (for example, redux-send (type: react-component) and ave (type: web-module)). It can generate UMD, CommonJS, and ES6 versions of the module.

As you can see, nwb can also be used to develop, test, and build plain JS web apps or libraries (both normal JS library and React components).

As of writing, nwb is still based on Babel 5, but I have yet to see a tool that is as well-put-together and well-tested as nwb.

Source: medium

For more information , please support and follow us.

Suggest for you:

Build Web Apps with React JS and Flux

Modern React with Redux

Advanced React and Redux

Build Apps with React Native

The Complete Web Development Tutorial Using React and Redux