Quick start a new application on React using nwb

The original is here .

Having written several applications on React, now it's pretty boring to start over again all the time. I need to set up a webpack, webpack-dev-server, Babel with some presets and plugins, Karma, React, several loaders for JSON, CSS, images and fonts - and merge it all together.


The boilerplate could be an alternative, but many of them contain a lot of unnecessary things (router, Redux or side server rendering) and do not cover some of the things I need (CSS loaders, unit testing, etc.). Not to mention the fact that different projects require different configurations.
')
Today, everything is really changing rapidly and the boilerplate becomes obsolete fairly quickly. Once you have created an application using boilerplate, it is your responsibility to keep all dependencies up to date. I updated the dependencies for several projects and it requires quite a lot of dull, repetitive work.

Now I prefer to use nwb .

Step 1. Install nwb.

$ npm install -g nwb 

Step 2. Use the nwb command to create a new application on React.

 $ nwb new react-app scoreboard 

Step 3. Looking inside.

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

There is neither webpack.config.js , nor .babelrc or karma.conf.js . All settings in nwb.config.js . So let's see.

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

The configuration is minimal! We only need to specify that we are developing a React application and reasonable default settings will be created.

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

All that in dependencies is react and react-dom .
In devDependencies only nwb . Neither webpack, nor Karma or Babel - all this is managed by nwb. Nwb itself contains many tests to ensure that all these things work together in concert.

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 launch webpack-dev-server.
Try changing files. You will see that webpack and Babel are already configured for hot-reload React components.
Try importing some npm module, for example:

 import Rx from 'rx' 

Thanks to the --auto-install flag, when you save the file, the missing dependencies will be installed and added to package.json .
Create and import a CSS file. Webpack is already configured and contains the correct loader and autoprefixer.
Setting it all up manually would take a lot of time.

Step 5. Run the tests.

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

This will launch Karma, integrated with the webpack and test coverage measurement.
With the --server flag , tests are restarted when you save the file.
A report will be created with the --coverage flag. You can install a plugin for the editor to see which lines are covered with tests and which are not.



Finally, run

 $ npm run build 

This command will generate static assets. JavaScript and CSS from node_modules will go to vendor.js and vendor.css , while the application code will go to app.js and app.css . Source maps are created in a separate .map file. You can then upload them to your web server.

I used nwb in several projects.
wonderstudio with an earlier version of nwb.
While the configuration in nwb is somewhat limited, although it works 90% out of the box, I need to make a hotfix to configure the webpack the way I want it.
The author nwb expressed his intentions in providing greater flexibility in configuration .

The last few libraries I've written also use nwb (for example, redux-send and ave ). It can generate UMD, CommonJS and ES6 versions of modules.

As you can see, nwb can also be used to develop, test, and build web applications and libraries on pure JS or React components.

At the time of writing, nwb uses Babel 5, but I still have to look for a tool that looks and tested as well as nwb. Built-in support for unit testing makes it preferable for me to others: D