├── .babelrc
├── .gitignore
├── .jshintrc
├── src
├── index.js
└── App.js
├── index.html
├── .eslintrc
├── server.js
├── webpack.config.js
├── LICENSE
├── package.json
└── README.md
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | dist
5 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "node": true,
3 | "browser": true,
4 | "esnext": true,
5 | "newcap": false
6 | }
7 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(, document.getElementById('root'));
6 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class App extends Component {
4 | render() {
5 | return (
6 | Hello, world.
7 | );
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sample App
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "ecmaFeatures": {
3 | "jsx": true,
4 | "modules": true
5 | },
6 | "env": {
7 | "browser": true,
8 | "node": true
9 | },
10 | "parser": "babel-eslint",
11 | "rules": {
12 | "quotes": [2, "single"],
13 | "strict": [2, "never"],
14 | "react/jsx-uses-react": 2,
15 | "react/jsx-uses-vars": 2,
16 | "react/react-in-jsx-scope": 2
17 | },
18 | "plugins": [
19 | "react"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | historyApiFallback: true
9 | }).listen(3000, 'localhost', function (err, result) {
10 | if (err) {
11 | return console.log(err);
12 | }
13 |
14 | console.log('Listening at http://localhost:3000/');
15 | });
16 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'webpack-dev-server/client?http://localhost:3000',
8 | 'webpack/hot/only-dev-server',
9 | './src/index'
10 | ],
11 | output: {
12 | path: path.join(__dirname, 'dist'),
13 | filename: 'bundle.js',
14 | publicPath: '/static/'
15 | },
16 | plugins: [
17 | new webpack.HotModuleReplacementPlugin()
18 | ],
19 | module: {
20 | loaders: [{
21 | test: /\.js$/,
22 | loaders: ['react-hot', 'babel'],
23 | include: path.join(__dirname, 'src')
24 | }]
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Dan Abramov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-hot-boilerplate",
3 | "version": "1.0.0",
4 | "description": "Boilerplate for ReactJS project with hot code reloading",
5 | "scripts": {
6 | "start": "node server.js",
7 | "lint": "eslint src"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/gaearon/react-hot-boilerplate.git"
12 | },
13 | "keywords": [
14 | "react",
15 | "reactjs",
16 | "boilerplate",
17 | "hot",
18 | "reload",
19 | "hmr",
20 | "live",
21 | "edit",
22 | "webpack"
23 | ],
24 | "author": "Dan Abramov (http://github.com/gaearon)",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
28 | },
29 | "homepage": "https://github.com/gaearon/react-hot-boilerplate",
30 | "devDependencies": {
31 | "babel-core": "^6.0.20",
32 | "babel-eslint": "^4.1.3",
33 | "babel-loader": "^6.0.1",
34 | "babel-preset-es2015": "^6.0.15",
35 | "babel-preset-react": "^6.0.15",
36 | "babel-preset-stage-0": "^6.0.15",
37 | "eslint": "^1.10.3",
38 | "eslint-plugin-react": "^3.6.2",
39 | "react-hot-loader": "^1.3.0",
40 | "webpack": "^1.12.2",
41 | "webpack-dev-server": "^1.12.1"
42 | },
43 | "dependencies": {
44 | "react": "^0.14.6",
45 | "react-dom": "^0.14.6"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | >## A Big Update Is Coming
2 |
3 | >React Hot Loader 3 is [on the horizon](https://github.com/gaearon/react-hot-loader/pull/240), and you can try it today ([boilerplate branch](https://github.com/gaearon/react-hot-boilerplate/pull/61), [upgrade example](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915)). It fixes some [long-standing issues](https://twitter.com/dan_abramov/status/722040946075045888) with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, [this commit](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915) is a good reference.
4 |
5 |
6 | React Hot Boilerplate
7 | =====================
8 |
9 | The minimal dev environment to enable live-editing React components.
10 |
11 | ### Usage
12 |
13 | ```
14 | npm install
15 | npm start
16 | open http://localhost:3000
17 | ```
18 |
19 | Now edit `src/App.js`.
20 | Your changes will appear without reloading the browser like in [this video](http://vimeo.com/100010922).
21 |
22 | ### Linting
23 |
24 | This boilerplate project includes React-friendly ESLint configuration.
25 |
26 | ```
27 | npm run lint
28 | ```
29 |
30 | ### Using `0.0.0.0` as Host
31 |
32 | 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.
33 |
34 | ### Missing Features
35 |
36 | 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).
37 |
38 | ### Dependencies
39 |
40 | * React
41 | * Webpack
42 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
43 | * [babel-loader](https://github.com/babel/babel-loader)
44 | * [react-hot-loader](https://github.com/gaearon/react-hot-loader)
45 |
46 | ### Resources
47 |
48 | * [Demo video](http://vimeo.com/100010922)
49 | * [react-hot-loader on Github](https://github.com/gaearon/react-hot-loader)
50 | * [Integrating JSX live reload into your workflow](http://gaearon.github.io/react-hot-loader/getstarted/)
51 | * [Troubleshooting guide](https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md)
52 | * Ping dan_abramov on Twitter or #reactjs IRC
53 |
--------------------------------------------------------------------------------