React + Redux initial boilerplate

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-1", "stage-0"]
+}

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "babel-eslint",
+
+  "extends": "eslint:recommended",
+
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParams": true,
+    "destructuring": true,
+    "modules": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "restParams": true,
+    "spread": true,
+    "superInFunctions": true,
+    "templateStrings": true
+  },
+
+  "rules": {
+    "strict": [2, "global"],
+    "no-unused-vars": 0,
+    "no-console": 0,
+    "camelcase": [2, {"properties": "always"}],
+    "consistent-return": 2,
+    "arrow-spacing": 2,
+    "arrow-parens": [2, "always"],
+    "arrow-body-style": [2, "always"]
+  }
+}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+.idea
+*.iml
+node_modules/
+build/
+npm-debug.log

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Nick S. Plekhanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,49 @@
+# React + Redux w/ ES6 Starter Project
+
+A boilerplate using React, Redux, webpack + hot module reloading, and ES6 + JSX via Babel.
+
+The provided boilerplate enables client-side ES6 via the following technologies:
+
+- [webpack](http://webpack.github.io/) and [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html) as a client-side module builder and module loader.
+- [npm](https://www.npmjs.com/) as a package manager and task runner (say [**NO**](http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/) to gulp/grunt).
+- [Babel](http://babeljs.io/) 6 as a transpiler from ES6 to ES5.
+- [React](https://facebook.github.io/react/) and [JSX](https://facebook.github.io/jsx/) as a virtual Dom JavaScript library for rendering user interfaces (views).
+- [Redux](http://redux.js.org/) as an incredibly simple way of modelling your data app state, with great community support.
+
+## Getting Started
+
+### Installation
+
+```
+git clone https://github.com/nicksp/redux-webpack-es6-boilerplate.git app-name
+cd app-name
+npm i
+```
+
+### White Label It
+
+- Update name, desription, author, repository in `package.json`
+- Update app title in `src/index.html`
+
+
+## Development
+
+There are two ways in which you can build and run the web app:
+
+* Build once:
+  * `npm run build`
+  * Open `build/index.html`
+* Hot reloading via webpack dev server:
+  * `npm start`
+  * Go to `http://localhost:8080/`, page reloads automatically when there are changes
+
+## TODO
+
+- Watch `styles` and `index.html` for changes and copy them across to `build` when appropriate
+- Add `production` and `dev` webpack configurations and relevant `npm` tasks.
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Brought to you by Nick S. Plekhanov

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "redux-webpack-es6-boilerplate",
+  "description": "A starter project for modern React apps with Redux",
+  "version": "0.1.0",
+  "author": "Nick S. Plekhanov <[email protected]>",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "redux",
+    "es6",
+    "babel",
+    "webpack",
+    "boilerplate",
+    "starter"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicksp/redux-webpack-es6-boilerplate.git"
+  },
+  "bugs": "https://github.com/nicksp/redux-webpack-es6-boilerplate/issues",
+  "scripts": {
+    "start": "webpack-dev-server --hot --inline --host 127.0.0.1",
+    "build": "webpack",
+    "lint": "eslint src/js/**.js"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^4.1.6",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "copy-webpack-plugin": "^0.3.3",
+    "eslint": "^1.10.3",
+    "webpack": "^1.12.12",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "babel-preset-stage-1": "^6.3.13",
+    "lodash": "^4.1.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.1.2",
+    "redux": "^3.1.6"
+  }
+}

src/css/app.css

@@ -0,0 +1,3 @@
+body {
+  background: #f1f1f1;
+}

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Redux minimal boilerplate</title>
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <link rel="stylesheet" href="app.css">
+</head>
+<body>
+
+<div class="container"></div>
+
+<script src="bundle.js"></script>
+</body>
+</html>

src/js/components/app.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+
+import ExampleContainer from '../containers/ExampleContainer';
+
+export default class App extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Redux minimal boilerplate</h1>
+        <ExampleContainer />
+      </div>
+    );
+  }
+}

src/js/containers/ExampleContainer.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class ExampleContainer extends Component {
+  render() {
+    if (!this.props.prop) {
+      return <div>ExampleContainer::Initialize app state first.</div>;
+    }
+
+    return (
+      <div>
+        <h3>Example Container</h3>
+        <p>Sample text for example container.</p>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    prop: state.prop
+  };
+}
+
+export default connect(mapStateToProps)(ExampleContainer);

src/js/main.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+
+import App from './components/app';
+import reducers from './reducers';
+
+const createStoreWithMiddleware = applyMiddleware()(createStore);
+
+ReactDOM.render(
+  <Provider store={createStoreWithMiddleware(reducers)}>
+    <App />
+  </Provider>
+  , document.querySelector('.container'));

src/js/reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+const rootReducer = combineReducers({
+  state: (state = {}) => state
+});
+
+export default rootReducer;

webpack.config.js

@@ -0,0 +1,53 @@
+var path = require('path');
+
+var webpack = require('webpack');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+
+// App files location
+var dirs = {
+  scripts: path.resolve(__dirname, 'src/js'),
+  styles: path.resolve(__dirname, 'src/css'),
+  html: path.resolve(__dirname, 'src/index.html'),
+  build: path.resolve(__dirname, 'build')
+};
+
+module.exports = {
+  entry: [
+    path.resolve(dirs.scripts, 'main.js')
+  ],
+  output: {
+    path: dirs.build,
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: dirs.scripts,
+        loader: 'babel-loader'
+      }
+    ]
+  },
+  plugins: [
+    // Simply copies the files over
+    new CopyWebpackPlugin([
+      { from: dirs.html }, // to: output.path
+      { from: dirs.styles }
+    ]),
+    // Avoid publishing files when compilation fails
+    new webpack.NoErrorsPlugin()
+  ],
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  devServer: {
+    contentBase: dirs.build,
+    historyApiFallback: true
+  },
+  stats: {
+    // Nice colored output
+    colors: true
+  },
+  // Create sourcemaps for the bundle
+  devtool: 'source-map'
+};