Boostrap using react-hot-boilerplate

I am too lazy to figure out how to use Webpack etc, so just using this
minimal boilerplate as a starting point:

https://github.com/gaearon/react-hot-boilerplate.git

This corresponds to the current HEAD of the master branch (commit
f66496ab2f068150fbeb7c95bb137e06e1a02b47).

diff --git a/.babelrc b/.babelrc
new file mode 100644 (file)
index 0000000..ce840ab
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}
\ No newline at end of file

diff --git a/.eslintrc b/.eslintrc
new file mode 100644 (file)
index 0000000..329eec0
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..b0e3907
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+.DS_Store

diff --git a/.jshintrc b/.jshintrc
new file mode 100644 (file)
index 0000000..d9fb189
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,6 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "newcap": false
+}

diff --git a/LICENSE b/LICENSE
new file mode 100644 (file)
index 0000000..44a03c2
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Dan Abramov
+
+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.

diff --git a/README.md b/README.md
new file mode 100644 (file)
index 0000000..4b77be1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,47 @@
+react-hot-boilerplate
+=====================
+
+The minimal dev environment to enable live-editing React components.
+
+### Usage
+
+```
+npm install
+npm start
+open http://localhost:3000
+```
+
+Now edit `src/App.js`.  
+Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
+
+### Linting
+
+This boilerplate project includes React-friendly ESLint configuration.
+
+```
+npm run lint
+```
+
+### Using `0.0.0.0` as Host
+
+You may want to change the host in `server.js` and `webpack.config.js` from `localhost` to `0.0.0.0` to allow access from same WiFi network. This is not enabled by default because it is reported to cause problems on Windows. This may also be useful if you're using a VM.
+
+### Missing Features
+
+This boilerplate is purposefully simple to show the minimal configuration for React Hot Loader. For a real project, you'll want to add a separate config for production with hot reloading disabled and minification enabled. You'll also want to add a router, styles and maybe combine dev server with an existing server. This is out of scope of this boilerplate, but you may want to look into [other starter kits](https://github.com/gaearon/react-hot-loader/blob/master/docs/README.md#starter-kits).
+
+### Dependencies
+
+* React
+* Webpack
+* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
+* [babel-loader](https://github.com/babel/babel-loader)
+* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
+
+### Resources
+
+* [Demo video](http://vimeo.com/100010922)
+* [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
+* [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
+* [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
+* Ping dan_abramov on Twitter or #reactjs IRC

diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..c4d9c49
--- /dev/null
+++ b/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>Sample App</title>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>

diff --git a/package.json b/package.json
new file mode 100644 (file)
index 0000000..cd36e2d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "react-hot-boilerplate",
+  "version": "1.0.0",
+  "description": "Boilerplate for ReactJS project with hot code reloading",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gaearon/react-hot-boilerplate.git"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "boilerplate",
+    "hot",
+    "reload",
+    "hmr",
+    "live",
+    "edit",
+    "webpack"
+  ],
+  "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
+  },
+  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
+  "devDependencies": {
+    "babel-core": "^5.4.7",
+    "babel-eslint": "^3.1.9",
+    "babel-loader": "^5.1.2",
+    "eslint-plugin-react": "^2.3.0",
+    "react-hot-loader": "^1.2.7",
+    "webpack": "^1.9.6",
+    "webpack-dev-server": "^1.8.2"
+  },
+  "dependencies": {
+    "react": "^0.13.0"
+  }
+}

diff --git a/server.js b/server.js
new file mode 100644 (file)
index 0000000..5ac2b33
--- /dev/null
+++ b/server.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    console.log(err);
+  }
+
+  console.log('Listening at localhost:3000');
+});

diff --git a/src/App.js b/src/App.js
new file mode 100644 (file)
index 0000000..0545372
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+export default class App extends Component {
+  render() {
+    return (
+      <h1>Hello, world.</h1>
+    );
+  }
+}

diff --git a/src/index.js b/src/index.js
new file mode 100644 (file)
index 0000000..0b86883
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,4 @@
+import React from 'react';
+import App from './App';
+
+React.render(<App />, document.getElementById('root'));

diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644 (file)
index 0000000..293c0af
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,30 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+  entry: [
+    'webpack-dev-server/client?http://localhost:3000',
+    'webpack/hot/only-dev-server',
+    './src/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      loaders: ['react-hot', 'babel'],
+      include: path.join(__dirname, 'src')
+    }]
+  }
+};