use express instead of webpack-dev-server for more flexability

README.md

@@ -23,7 +23,7 @@ Usage
 node server.js
 ```
 
-Open [http://localhost:8080/](http://localhost:8080/).
+Open [http://localhost:3000/](http://localhost:3000/).
 
 
 
@@ -52,6 +52,5 @@ More Details
 
 * No CSS. For experiments or tests, put your styles in `index.html` in a `<style>` tag. For real projects, pick from [these style tools](http://andrewhfarmer.com/how-to-style-react/).
 * No Flux. If you need it - try [Redux](https://github.com/reactjs/redux) or [MobX](https://github.com/mobxjs/mobx)!
-* Webpack is run with the `webpack-dev-server`. There are [other ways to run Webpack](http://andrewhfarmer.com/webpack-hmr-tutorial/).
+* Webpack is run with the `express` and `webpack-dev-middleware`.
 * The 'content base' is set to `www`. Any files in that directory will be served by the webpack server.
-* HMR is supported, so code changes will be noticed automatically.

package.json

@@ -1,9 +1,10 @@
 {
   "name": "minimal-react-starter",
-  "version": "0.0.2",
-  "description": "Minimal react starter project using webpack-dev-server.",
-  "main": "js/index.js",
+  "version": "0.0.3",
+  "description": "Minimal react starter project",
+  "main": "src/index.js",
   "scripts": {
+    "compile": "webpack",
     "start": "node server.js"
   },
   "keywords": [
@@ -20,12 +21,14 @@
     "url": "git://github.com/ahfarmer/minimal-react-starter.git"
   },
   "dependencies": {
+    "babel-core": "^6.9.1",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "express": "^4.13.4",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-middleware": "^1.6.1"
   }
 }

server.js

@@ -1,17 +1,25 @@
-var WebpackDevServer = require('webpack-dev-server');
+var express = require('express');
+var webpackDevMiddleware = require('webpack-dev-middleware');
 var webpack = require('webpack');
-var config = require('./webpack.config.js');
+var webpackConfig = require('./webpack.config.js');
+var app = express();
 
-var compiler = webpack(config);
-var server = new WebpackDevServer(compiler, {
-  contentBase: 'www',
+var compiler = webpack(webpackConfig);
+
+app.use(express.static(__dirname + '/www'));
+
+app.use(webpackDevMiddleware(compiler, {
   hot: true,
   filename: 'bundle.js',
   publicPath: '/',
   stats: {
     colors: true,
   },
-});
-server.listen(8080, 'localhost', () => {
-  console.log('Server started, webpack is compiling...');
+  historyApiFallback: true,
+}));
+
+var server = app.listen(3000, function() {
+  var host = server.address().address;
+  var port = server.address().port;
+  console.log('Example app listening at http://%s:%s', host, port);
 });

src/Counter.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * A counter button: tap the button to increase the count.
+ */
+class Counter extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      count: 0,
+    };
+  }
+
+  render() {
+    return (
+      <button
+        onClick={() => {
+          this.setState({ count: this.state.count + 1 });
+        }}
+      >
+        Count: {this.state.count}
+      </button>
+    );
+  }
+}
+export default Counter;

src/index.js → src/main.js

@@ -1,11 +1,8 @@
-/**
- * Hello
- */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import HelloWorld from './HelloWorld';
+import Counter from './Counter';
 
 ReactDOM.render(
-  React.createElement(HelloWorld),
+  React.createElement(Counter),
   document.getElementById('mount')
 );

webpack.config.js

@@ -1,36 +1,32 @@
 var path = require('path');
-var webpack = require('webpack');
-var projectRoot = __dirname;
 
 var config = {
-  context: path.join(projectRoot, 'src'),
+  context: path.join(__dirname, 'src'),
   entry: [
-    './index.js',
-    'webpack/hot/dev-server',
-    'webpack-dev-server/client?http://localhost:8080/',
+    './main.js',
   ],
   output: {
-    path: path.join(projectRoot, 'html'),
+    path: path.join(__dirname, 'www'),
     filename: 'bundle.js',
-    publicPath: '/',
   },
   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loaders: ['babel'],
+      },
     ],
   },
   resolveLoader: {
     root: [
-      path.join(projectRoot, 'node_modules'),
+      path.join(__dirname, 'node_modules'),
     ],
   },
   resolve: {
     root: [
-      path.join(projectRoot, 'node_modules'),
+      path.join(__dirname, 'node_modules'),
     ],
   },
-  plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-  ],
 };
 module.exports = config;

www/index.html

@@ -1,15 +1,6 @@
 <html>
-<head>
-  <style>
-    .hello-world {
-      border: 2px solid lightblue;
-    }
-  </style>
-</head>
 <body>
-  Your component will be mounted here:
-  <div id='mount'>
-  </div>
-  <script src='bundle.js' ></script>
+  <div id="mount"></div>
+  <script src="/bundle.js" ></script>
 </body>
 </html>