Skip to content

Commit

Permalink
Merge pull request #6 from pheuter/webpack
Browse files Browse the repository at this point in the history
Switch over to Webpack from Browserify
  • Loading branch information
pheuter committed Mar 14, 2015
2 parents d2a1ca9 + f9ed97d commit 2a929fc
Show file tree
Hide file tree
Showing 24 changed files with 444 additions and 147 deletions.
5 changes: 1 addition & 4 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,4 @@ language: node_js
node_js:
- "0.10"
after_script:
- npm run cover
branches:
only:
- master
- npm run coveralls
84 changes: 23 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,19 @@ A minimal skeleton for building testable React apps using ES6.
- [Dev](#dev)
- [Project structure](#project-structure)
- [Commands](#commands)
- [watch](#watch)
- [watch-js](#watch-js)
- [server](#server)
- [build](#build)
- [test](#test)
- [cover](#cover)
- [server](#server)
- [coveralls](#coveralls)
- [clean](#clean)
- [TODO](#todo)

## Design Goals

- As few tools as possible (no task runners, etc...)
- ES6 with support for legacy browsers (IE 8)
- Testability
- No templates, compose DOM alongside components via JSX
- No stylesheets, leverage [Radium](http://projects.formidablelabs.com/radium/) for styling in JavaScript
- As few tools as possible (no yeoman, gulp, bower, etc...)
- ES6 with polyfills for current browsers
- Testability: ease of writing unit tests and generating code coverage
- Minimize templates, compose DOM alongside components via JSX
- Session-driven routing using [react-router](https://github.com/rackt/react-router) with async data fetching

## Getting Started
Expand All @@ -55,18 +52,15 @@ Navigate to **http://localhost:8080/** to view the app.

- [react v0.12](http://facebook.github.io/react/)
- [react-router v0.12](https://github.com/rackt/react-router)
- [xhr v2.0](https://github.com/Raynos/xhr)
- [es5-shim v4.1](https://github.com/es-shims/es5-shim)
- [console-polyfill v0.2](https://github.com/paulmillr/console-polyfill)

### Dev

- [browserify v9.0](http://browserify.org/)
- [babelify v5.0](http://babeljs.io/)
- [mochify v2.6](https://github.com/mantoni/mochify.js)
- [expect.js v4.12](https://github.com/Automattic/expect.js)
- [webpack](http://webpack.github.io/)
- [react hot loader](https://github.com/gaearon/react-hot-loader)
- [karma](http://karma-runner.github.io/0.12/index.html)
- [babel](http://babeljs.io/)

Check out [package.json](package.json) for complete list.
Check out [package.json](package.json) for the complete list.

## Project structure

Expand All @@ -83,27 +77,17 @@ A case can be made to move **routers** into **common**, but I felt it made sense

A core philosophy of this skeleton app is to keep the tooling to a minimum. For this reason, you can find all the commands in the `scripts` section of [package.json](package.json).

### watch

```sh
$ npm run watch
```

Runs `watch-js` and `server` in a single command.

### watch-js
### server

```sh
$ npm run watch-js
$ npm run server
```

**Input:** `src/main.jsx`

**Output:** `build/app.js`

This leverages [watchify](https://github.com/substack/watchify) to efficiently cache and build your browserify bundle on-the-fly as you save various files.
This leverages [React Hot Loader](https://github.com/gaearon/react-hot-loader) to automatically start a local dev server and refresh file changes on the fly without reloading the page.

It also automatically includes source maps into the output file, allowing you to browse code and set breakpoints on the original ES6 code:
It also automatically includes source maps, allowing you to browse code and set breakpoints on the original ES6 code:

![](https://www.dropbox.com/s/zgb3psadwcawjc8/Screenshot%202015-03-08%2017.09.53.png?dl=1)

Expand All @@ -117,40 +101,29 @@ $ npm run build

**Output:** `build/app.js`

Very similar to **watch**, but doesn't include source maps and minifies the output using [uglifyjs2](https://github.com/mishoo/UglifyJS2).
Build minified app for production using the [production](http://webpack.github.io/docs/cli.html#production-shortcut-p) shortcut.

### test

```sh
$ npm test
$ npm run test-watch
```

**Input:** `test/main.js`

Leverages [Mochify](https://github.com/mantoni/mochify.js) to run through all tests `require-d` in the input file.
**Output:** `coverage/`

Running `test-watch` will listen for changes and re-run the specs on-the-fly.
Leverages [Karma](http://karma-runner.github.io/0.12/index.html) to run through the test suite using [PhantomJS](http://phantomjs.org/) and generate code coverage reports.

### cover
### coveralls

```sh
$ npm run cover
$ npm run coveralls
```

**Input:** `test/main.js`

Executes [cover.js](cover.js) that leverages [mochify-istanbul](https://github.com/ferlores/mochify-istanbul) to generate a code coverage report that is then sent to [Coveralls](http://coveralls.io/).
**Input:** `coverage/lcov.info`

### server

```sh
$ npm run server
```

**Input:** `server.js`

Runs a local dev server using [express](http://expressjs.com/) on port **8080**, serving static files in the [build/](build/) directory.
Sends the code coverage report generated by [Istanbul](https://github.com/gotwarlost/istanbul) to [Coveralls](http://coveralls.io/).

### clean

Expand All @@ -160,15 +133,4 @@ $ npm run clean

**Input:** `build/app.js`

Removes the compiled app file from build.

## TODO

- [ ] Styling using [Radium](https://github.com/FormidableLabs/radium).
- [ ] Responsive design with media query mixins
- [x] Testing
- [x] Unit test suite
- [x] CI
- [x] Code coverage
- [ ] Examples of nested views
- [ ] More complex navigation
Removes the compiled app file from build.
6 changes: 5 additions & 1 deletion build/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
user = false;
</script>

<script src="app.js"></script>
<!-- For local development -->
<script src="http://localhost:9090/build/app.js"></script>

<!-- For production -->
<!-- <script src="app.js"></script> -->
</body>
</html>
11 changes: 0 additions & 11 deletions cover.js

This file was deleted.

108 changes: 108 additions & 0 deletions karma.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/**
* This is the Karma configuration file. It contains information about this skeleton
* that provides the test runner with instructions on how to run the tests and
* generate the code coverage report.
*
* For more info, see: http://karma-runner.github.io/0.12/config/configuration-file.html
*/
module.exports = function(config) {
config.set({

/**
* These are the files required to run the tests.
*
* The `Function.prototype.bind` polyfill is required by PhantomJS
* because it uses an older version of JavaScript.
*/
files: [
'./test/polyfill.js',
'./test/main.js'
],

/**
* The actual tests are preprocessed by the karma-webpack plugin, so that
* their source can be properly transpiled.
*/
preprocessors: {
'./test/main.js': ['webpack']
},

/**
* We want to run the tests using the PhantomJS headless browser.
* This is especially useful for continuous integration.
*/
browsers: ['PhantomJS'],

/**
* Use Mocha as the test framework, Sinon for mocking, and
* Chai for assertions.
*/
frameworks: ['mocha', 'sinon-chai'],

/**
* After running the tests, return the results and generate a
* code coverage report.
*/
reporters: ['progress', 'coverage'],

/**
* When generating a code coverage report, use `lcov` format and
* place the result in coverage/lcov.info
*
* This file will be sent to Coveralls by the `coveralls` npm script.
*/
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'lcovonly', subdir: '.', file: 'lcov.info' },
{ type: 'html', subdir: 'html' }
]
},

/**
* The configuration for the karma-webpack plugin.
*
* This is very similar to the main webpack.local.config.js, with the
* exception of specifying an istanbul-transformer post loader so
* that we can generate an accurate code coverage report.
*/
webpack: {
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"}
],
postLoaders: [{
test: /\.jsx?$/,
exclude: /(test|node_modules)\//,
loader: 'istanbul-instrumenter'
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
},

/**
* Configuration option to turn off verbose logging of webpack compilation.
*/
webpackMiddleware: {
noInfo: true
},

/**
* Once the mocha test suite returns, we want to exit from the test runner as well.
*/
singleRun: true,

/**
* List of plugins
*/
plugins: [
'karma-mocha',
'karma-webpack',
'karma-coverage',
'karma-sinon-chai',
'karma-phantomjs-launcher'
],
});
}
40 changes: 18 additions & 22 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@
"description": "A minimal skeleton for building testable React apps using ES6.",
"main": "src/main.jsx",
"scripts": {
"watch": "npm run watch-js & npm run server",
"watch-js": "watchify --debug src/main.jsx -o build/app.js -v",
"build": "browserify src/main.jsx | uglifyjs --compress --mangle -o build/app.js -- -",
"test": "mochify",
"test-watch": "mochify --watch",
"cover": "node cover.js && cat lcov.info | coveralls && rm lcov.info",
"server": "node server.js",
"build": "webpack -p --config webpack.production.config.js",
"test": "PHANTOMJS_BIN=./node_modules/.bin/phantomjs ./node_modules/karma/bin/karma start karma.config.js",
"coveralls": "cat coverage/lcov.info | coveralls",
"clean": "rm build/app.js"
},
"repository": {
Expand All @@ -30,26 +27,25 @@
},
"homepage": "https://github.com/pheuter/essential-react",
"devDependencies": {
"babelify": "^5.0.4",
"browserify": "^9.0.3",
"babel-core": "^4.7.8",
"babel-loader": "^4.1.0",
"coveralls": "^2.11.2",
"expect.js": "^0.3.1",
"express": "^4.12.2",
"mochify": "^2.6.0",
"mochify-istanbul": "^2.1.1",
"uglify-js": "^2.4.16",
"watchify": "^2.4.0"
"istanbul": "^0.3.7",
"istanbul-instrumenter-loader": "^0.1.2",
"karma": "^0.12.31",
"karma-coverage": "^0.2.7",
"karma-mocha": "^0.1.10",
"karma-phantomjs-launcher": "^0.1.4",
"karma-sinon-chai": "^0.3.0",
"karma-webpack": "^1.5.0",
"phantomjs": "^1.9.16",
"react-hot-loader": "^1.2.3",
"webpack": "^1.7.2",
"webpack-dev-server": "^1.7.0"
},
"dependencies": {
"console-polyfill": "^0.2.0",
"es5-shim": "^4.1.0",
"react": "^0.12.2",
"react-router": "^0.12.4",
"xhr": "^2.0.1"
},
"browserify": {
"transform": [
"babelify"
]
"react-router": "^0.12.4"
}
}
Loading

0 comments on commit 2a929fc

Please sign in to comment.