From 53b3b8e6a6ea548f623d6a49b8e57e183cd92a02 Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Wed, 26 Aug 2015 19:44:53 +0100 Subject: [PATCH 1/5] Add `npm` scripts for starting servers in development environment Also drop requirement for globally available `webpack` and `karma` dependencies. NPM adds `node_modules/.bin` to its `PATH` and that means you don't need to worry about installing Node.js dependencies globally. The `npm run` command will use locally installed binaries instead. --- README.md | 15 ++++++--------- package.json | 3 +++ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index a489350..3e937af 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,20 @@ ## Installation ``` -npm install webpack -g -npm install karma-cli -g npm install ``` ## Workflow -1. Run webpack-dev-server.js with Node. This will run `webpack-dev-server` with -HMR enabled on port 5000: +1. Run `webpack-dev-server` acting as a static content HTTP server with hot +module replacement enabled on port 5000: >``` ->node webpack-dev-server.js +>npm run dev-server >``` 2. Run an HTTP server on port 5001. This is going to handle your back-end application (e.g. Rails). -One of the available options is [http-server](https://www.npmjs.com/package/http-server). +We have opted for [http-server](https://www.npmjs.com/package/http-server). >``` ->http-server -p 5001 +>npm start >``` 3. Open http://localhost:5001 in your browser. @@ -24,8 +22,7 @@ One of the available options is [http-server](https://www.npmjs.com/package/http 4. Make a change in any of your scripts or stylesheets - you should see these changes applied in the browser instantaneously. - -5. Once finished modifying files, run Webpack to compile the bundle(s) into the +5. Once finished modifying files, get Webpack to compile the bundle(s) into the filesystem. >``` >npm run build diff --git a/package.json b/package.json index ffb5734..1a71ef1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "css-loader": "^0.15.6", "eslint": "^1.1.0", "eslint-loader": "^1.0.0", + "http-server": "^0.8.0", "isparta-loader": "^0.2.0", "karma": "^0.13.9", "karma-chai": "^0.1.0", @@ -29,6 +30,8 @@ "scripts": { "build": "webpack", "clean": "rm -fr tmp/coverage/javascript/* && rm -fr dist/*", + "dev-server": "node webpack-dev-server.js", + "start": "http-server -p 5001", "test": "karma start" }, "repository": { From 8f3c74ef47bfde1ea86d04c3bfe4c51deddf6f8f Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Thu, 27 Aug 2015 11:08:44 +0100 Subject: [PATCH 2/5] Add OS X-specific script that launches application in browser --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 1a71ef1..c77c9f2 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "webpack-dev-server": "^1.10.1" }, "scripts": { + "browse": "open http://localhost:5001", "build": "webpack", "clean": "rm -fr tmp/coverage/javascript/* && rm -fr dist/*", "dev-server": "node webpack-dev-server.js", From 768af9eb9ae5174b94519ffd1623f99a69200ba6 Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Wed, 26 Aug 2015 20:10:47 +0100 Subject: [PATCH 3/5] Add `npm` script for linting JavaScript You might want to go `npm run clean` before running the linter to prevent it from reporting on the Istanbul coverage JavaScript files. --- README.md | 8 ++++++++ package.json | 1 + 2 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 3e937af..2d7a5a0 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,18 @@ filesystem. >``` ## Unit tests and code coverage +We use [Mocha](https://mochajs.org), [Chai](http://chaijs.com) and +[React](http://facebook.github.io/react/)'s `TestUtils` package. ``` npm test ``` +### Linting +We use [ESLint](http://eslint.org) for JavaScript code style and syntax validation. +``` +npm run lint +``` + ### Code coverage We use [Istanbul](http://istanbul-js.org/) for unit test code coverage reports. But because Istanbul does not currently understand the ECMAScript 6 syntax, we diff --git a/package.json b/package.json index c77c9f2..e221870 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "clean": "rm -fr tmp/coverage/javascript/* && rm -fr dist/*", "dev-server": "node webpack-dev-server.js", "start": "http-server -p 5001", + "lint": "eslint --ignore-pattern dist ./; exit 0", "test": "karma start" }, "repository": { From bfe0acf2bded1a9992172e4d6d59eaf63881ef17 Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Thu, 27 Aug 2015 00:16:35 +0100 Subject: [PATCH 4/5] Fix issues reported by ESLint via `npm run lint` --- karma.conf.js | 24 ++++++++++++------------ spec/section_spec.js | 16 ++++++++-------- src/book/section.jsx | 6 +++--- webpack-dev-server.js | 8 ++++---- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 9d79e9e..0fdc36c 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -32,16 +32,16 @@ module.exports = function(config) { webpack: { module: { - preLoaders: [ - { test: /\.jsx?$/, loader: 'isparta', exclude: /\/(spec|node_modules)\// }, - { test: /\.jsx?$/, loader: 'eslint', exclude: /(node_modules)/ } - ], - loaders: [ - { test: /\.jsx?$/, loader: 'babel', exclude: /(node_modules)/ }, - { test: /\.css$/, loaders: ['style', 'css'], exclude: /(node_modules)/ }, - { test: /\.scss$/, loaders: ['style', 'css', 'sass'], exclude: /(node_modules)/ } - ] - } + preLoaders: [ + { test: /\.jsx?$/, loader: 'isparta', exclude: /\/(spec|node_modules)\// }, + { test: /\.jsx?$/, loader: 'eslint', exclude: /(node_modules)/ } + ], + loaders: [ + { test: /\.jsx?$/, loader: 'babel', exclude: /(node_modules)/ }, + { test: /\.css$/, loaders: ['style', 'css'], exclude: /(node_modules)/ }, + { test: /\.scss$/, loaders: ['style', 'css', 'sass'], exclude: /(node_modules)/ } + ] + } }, @@ -80,5 +80,5 @@ module.exports = function(config) { // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false - }) -} + }); +}; diff --git a/spec/section_spec.js b/spec/section_spec.js index cba9e5a..a509b5b 100644 --- a/spec/section_spec.js +++ b/spec/section_spec.js @@ -1,8 +1,8 @@ import 'core-js/es5'; import React from 'react/addons'; -import Section from '../src/book/section.jsx' -import Heading from '../src/book/heading.jsx' -import Description from '../src/book/description.jsx' +import Section from '../src/book/section.jsx'; // eslint-disable-line no-unused-vars +import Heading from '../src/book/heading.jsx'; +import Description from '../src/book/description.jsx'; describe('Section', function() { let sectionComponent; @@ -15,25 +15,25 @@ describe('Section', function() { sectionComponent = shallowRenderer.getRenderOutput(); }); - it('is wrapped in
element',function() { + it('is wrapped in
element', function() { expect( sectionComponent.type ).to.equal( 'section' ); }); - describe('checks if children exist regardless of their order',function() { + describe('checks if children exist regardless of their order', function() { let children; before(function() { children = sectionComponent.props.children; }); - it('includes Heading component',function() { + it('includes Heading component', function() { let childHeading = children.filter( component => component.type === Heading ); expect( childHeading.length ).to.be.ok; }); - it('includes Description component',function() { + it('includes Description component', function() { let childDescription = children.filter( component => component.type === Description ); @@ -42,7 +42,7 @@ describe('Section', function() { }); // An alternative to the two tests above - it('includes Heading and Description components in particular order',function() { + it('includes Heading and Description components in particular order', function() { expect( sectionComponent.props.children ).to.eql( [ , diff --git a/src/book/section.jsx b/src/book/section.jsx index 6981a2e..746a2da 100644 --- a/src/book/section.jsx +++ b/src/book/section.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import Heading from './heading.jsx'; -import Description from './description.jsx'; +import Heading from './heading.jsx'; // eslint-disable-line no-unused-vars +import Description from './description.jsx'; // eslint-disable-line no-unused-vars export default class extends React.Component { render() { @@ -9,6 +9,6 @@ export default class extends React.Component {
- ) + ); } } diff --git a/webpack-dev-server.js b/webpack-dev-server.js index e2d8567..d0038dd 100644 --- a/webpack-dev-server.js +++ b/webpack-dev-server.js @@ -7,10 +7,10 @@ new WebpackDevServer(webpack(config), { hot: true, headers: { 'Access-Control-Allow-Origin': '*' }, historyApiFallback: true -}).listen(5000, 'localhost', function (err, result) { - if (err) { - console.log(err); +}).listen(5000, 'localhost', function(error) { + if (error) { + console.log(error); } console.log('Listening at localhost:5000'); -}); \ No newline at end of file +}); From 674559ded4f4df9f55fe78974770f350a1f3aa5d Mon Sep 17 00:00:00 2001 From: Chris Kobrzak Date: Thu, 27 Aug 2015 11:38:33 +0100 Subject: [PATCH 5/5] Corrections in README around NPM scripts --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2d7a5a0..e962892 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ npm install ``` ## Workflow -1. Run `webpack-dev-server` acting as a static content HTTP server with hot -module replacement enabled on port 5000: +1. Run `webpack-dev-server` acting as an asset server with hot module +replacement enabled on port 5000: >``` >npm run dev-server >``` @@ -17,7 +17,10 @@ We have opted for [http-server](https://www.npmjs.com/package/http-server). >npm start >``` -3. Open http://localhost:5001 in your browser. +3. Open http://localhost:5001 in your browser. If you are on OS X you can run: +>``` +>npm run browse +>``` 4. Make a change in any of your scripts or stylesheets - you should see these changes applied in the browser instantaneously. @@ -64,3 +67,5 @@ from command line (at least in the current configuration). ``` npm run clean ``` + +This will remove contents of `dist` and `tmp/coverage/javascript` directories.