Merge pull request #31 from whichdigital/npm-scripts

Add NPM scripts - Resolves #31

README.md

@@ -1,41 +1,49 @@
 ## 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 an asset 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.
+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.
 
-
-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
 >```
 
 ## 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
@@ -59,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.

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
-  })
-}
+  });
+};

package.json

@@ -11,6 +11,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,8 +30,12 @@
     "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",
+    "start": "http-server -p 5001",
+    "lint": "eslint --ignore-pattern dist ./; exit 0",
     "test": "karma start"
   },
   "repository": {

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 <section> element',function() {
+  it('is wrapped in <section> 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( [
       <Heading />,
       <Description />

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 {
         <Heading />
         <Description />
       </section>
-    )
+    );
   }
 }

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');
-});
+});