Skip to content
This repository has been archived by the owner on Aug 9, 2024. It is now read-only.

Commit-by-commit guide on how to set up Webpack with the following technologies: ES6, ES6 modules, JSX/React (with ES6 syntax), Mocha with Chai, Karma, assets bundling, linting and more.

License

Notifications You must be signed in to change notification settings

whichdigital/webpack-react-workflow

Repository files navigation

Installation

npm install

Workflow

  1. Run webpack-dev-server acting as an asset server with hot module replacement enabled on port 5000:
npm run dev-server
  1. Run an HTTP server on port 5001. This is going to handle your back-end application (e.g. Rails). We have opted for http-server.
npm start
  1. Open http://localhost:5001 in your browser. If you are on OS X you can run:
npm run browse
  1. Make a change in any of your scripts or stylesheets - you should see these changes applied in the browser instantaneously.

  2. Once finished modifying files, get Webpack to compile the bundle(s) into the filesystem.

npm run build

Unit tests and code coverage

We use Mocha, Chai and React's TestUtils package.

npm test

Linting

We use ESLint for JavaScript code style and syntax validation.

npm run lint

Code coverage

We use Istanbul for unit test code coverage reports. But because Istanbul does not currently understand the ECMAScript 6 syntax, we use a tool bridging these two technologies called Isparta. This extension allows us to generate reports for the actual ES6 source, not the ES5-compatible code "transpiled" by Babel.

The actual integration of Isparta with the Karma tests runner is done via a Webpack pre-loader. We have opted for a pre-loader instead of a loaded to clearly separate the coverage generation from other actions that involve various source code transformations. This is 100% arbitrary and the coverage reporter might as well be included in the subsequent loaders step.

Running results on command line

As we have now introduced a React component that depends on the DOM's document object, you won't be able to run the application directly from command line (at least in the current configuration).

Clean project

npm run clean

This will remove contents of dist and tmp/coverage/javascript directories.

About

Commit-by-commit guide on how to set up Webpack with the following technologies: ES6, ES6 modules, JSX/React (with ES6 syntax), Mocha with Chai, Karma, assets bundling, linting and more.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •