Added base webpack configuration and needed shellscripts.

.eslintrc

@@ -9,18 +9,20 @@
   "env": {
     "browser": true,
     "amd": true,
-    "es6": true
+    "es6": true,
+    "node": true
   },
   "rules": {
+    "comma-dangle": 1,
     "quotes": [ 1, "single" ],
-    "no-undef": false,
+    "no-undef": 1,
-    "global-strict": false,
+    "global-strict": 0,
     "no-extra-semi": 1,
-    "no-underscore-dangle": false,
+    "no-underscore-dangle": 0,
     "no-console": 1,
     "no-unused-vars": 1,
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
-    "no-alert": false
+    "no-alert": 0
   }
 }

README.md

@@ -5,17 +5,48 @@ It can be understood as the prototype for newly generated projects.
 ## Features
 The following features are planned to be included in the final version:
 
-- [ ] Webpack
+- [x] Webpack and Webpack-Dev-Server, including hot-loader
-- [ ] Babel
+- [x] Babel and JSX
 - [ ] Mocha Unit tests (*optional*)
 - [ ] React.Router
-- [ ] EsLint Support
+- [x] EsLint Support
-- [ ] No dependency on grunt, gulp or the next hot taskrunner!
+- [x] No dependency on grunt, gulp or the next hot taskrunner!
 
 ## What is it for?
 This template can be used directly for the creation of new projects.
 Also it will be the "template" for the next version of generator-react-webpack.
 
+## Using it
+The template is available via webpack. The following commands are available:
+```bash
+# Start for development
+npm start # or
+npm run serve
+
+# Start the dev-server with the dist version
+npm run servedist
+
+# Just build the dist version
+npm run dist
+
+# Run unit tests
+npm test
+```
+
+You can also use your globally installed version of webpack like this:
+```bash
+# Build or run the dev version:
+webpack
+webpack --env=dev
+
+webpack-dev-server
+webpack-dev-server --env=dev
+
+# Build or run the dist version
+webpack --env=dist
+webpack-dev-server --env=dist
+```
+
 ## License
 react-webpack-template is available under MIT-License and can therefore be used in any project free of charge.
 

dist/README.md

@@ -0,0 +1,2 @@
+# About the dist folder
+After building the dist version of your project, the generated files are stored in this folder. You should keep it under version control.

package.json

@@ -5,6 +5,10 @@
   "main": "index.js",
   "private": true,
   "scripts": {
+    "start": "node server.js --env=dev",
+    "serve": "node server.js --env=dev",
+    "servedist": "node server.js --env=dist",
+    "dist": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -23,7 +27,23 @@
   },
   "homepage": "https://github.com/weblogixx/react-webpack-template#readme",
   "devDependencies": {
+    "babel-core": "^5.8.22",
+    "babel-loader": "^5.3.2",
+    "css-loader": "^0.16.0",
+    "eslint": "^1.2.1",
+    "eslint-loader": "^1.0.0",
+    "eslint-plugin-react": "^3.3.0",
+    "file-loader": "^0.8.4",
+    "minimist": "^1.2.0",
+    "open": "0.0.5",
+    "react-hot-loader": "^1.2.9",
+    "style-loader": "^0.12.3",
+    "url-loader": "^0.5.6",
     "webpack": "^1.12.0",
     "webpack-dev-server": "^1.10.1"
+  },
+  "dependencies": {
+    "normalize.css": "^3.0.3",
+    "react": "^0.13.3"
   }
 }

server.js

@@ -0,0 +1,15 @@
+/*eslint no-console:0 */
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+var open = require('open');
+
+new WebpackDevServer(webpack(config), config.devServer)
+.listen(config.port, 'localhost', function(err) {
+  if (err) {
+    console.log(err);
+  }
+  console.log('Listening at localhost:' + config.port);
+  console.log('Opening your system browser...');
+  open('http://localhost:' + config.port + '/webpack-dev-server/');
+});

src/actions/README.md

@@ -0,0 +1,14 @@
+# About this folder
+This folder will hold all of your **flux** actions if you are using flux.
+You can include actions into your components or stores like this:
+
+```javascript
+let react = require('react/addons');
+let MyAction = require('actions/MyAction');
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    MyAction.exampleMethod();
+  }
+}
+```

src/components/Main.js

@@ -0,0 +1,19 @@
+require('normalize.css');
+require('styles/App.css');
+
+import React from 'react/addons';
+
+class AppComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        Content
+      </div>
+    );
+  }
+}
+
+AppComponent.defaultProps = {
+};
+
+export default AppComponent;

src/components/run.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import App from './Main';
+
+// Render the main component into the dom
+React.render(<App />, document.getElementById('app'));

src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>React Webpack Template Title</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+</head>
+<body>
+  <div id="app">APPLICATION CONTENT</div>
+
+  <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
+  <script type="text/javascript" src="assets/app.js"></script>
+</body>
+</html>

src/sources/README.md

@@ -0,0 +1,14 @@
+# About this folder
+This folder will hold all of your **flux** datasources.
+You can include them into your components or stores like this:
+
+```javascript
+let react = require('react/addons');
+let MySource = require('sources/MyAction');
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    MySource.getRemoteData();
+  }
+}
+```

src/stores/README.md

@@ -0,0 +1,14 @@
+# About this folder
+This folder will hold all of your **flux** stores.
+You can include them into your components like this:
+
+```javascript
+let react = require('react/addons');
+let MyStore = require('stores/MyStore');
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    MyStore.doSomething();
+  }
+}
+```

src/styles/App.css

@@ -0,0 +1 @@
+/* Base Application Styles */

webpack.config.js

@@ -0,0 +1,100 @@
+var webpack = require('webpack');
+var args = require('minimist')(process.argv.slice(2));
+var path = require('path');
+var env = args.env || 'dev';
+
+var port = 8000;
+var srcPath = __dirname + '/src/';
+var publicPath = '/assets/';
+
+var config = {
+  port: port,
+  debug: true,
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'app.js',
+    publicPath: publicPath
+  },
+  devServer: {
+    contentBase: './src/',
+    historyApiFallback: true,
+    hot: true,
+    port: port,
+    publicPath: publicPath,
+    noInfo: false
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    alias: {
+      actions: srcPath + '/actions/',
+      components: srcPath + '/components/',
+      sources: srcPath + '/sources/',
+      stores: srcPath + '/stores/',
+      styles: srcPath + '/styles/'
+    }
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        loader: 'eslint-loader'
+      }
+    ],
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style!css'
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2)$/,
+        loader: 'url-loader?limit=8192'
+      }
+    ]
+  }
+};
+
+// Use config depending on environment
+switch(env) {
+  case 'dist':
+    config.entry = './src/components/run';
+    config.cache = false;
+    config.devtool = false;
+    config.plugins = [
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin(),
+      new webpack.optimize.OccurenceOrderPlugin(),
+      new webpack.optimize.AggressiveMergingPlugin(),
+      new webpack.NoErrorsPlugin()
+    ];
+
+    // Add needed loaders
+    config.module.loaders.push({
+      test: /\.(js|jsx)$/,
+      loader: 'babel',
+      include: path.join(__dirname, 'src')
+    });
+    break;
+
+  default:
+    config.entry = [
+      'webpack-dev-server/client?http://127.0.0.1:' + port,
+      'webpack/hot/only-dev-server',
+      './src/components/run'
+    ];
+    config.cache = true;
+    config.devtool = 'sourcemap';
+    config.plugins = [
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoErrorsPlugin()
+    ];
+
+    // Add needed loaders
+    config.module.loaders.push({
+      test: /\.(js|jsx)$/,
+      loader: 'react-hot!babel-loader',
+      include: path.join(__dirname, 'src')
+    });
+}
+
+module.exports = config;