init

eezhal92 · Jun 8, 2017 · 180a90a · 180a90a
commit 180a90a
Show file tree

Hide file tree

Showing 15 changed files with 3,438 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }],
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/dist
+/node_modules
+
+*.log
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/static/vendor.js"></script>
+  <script src="/static/app.js"></script>
+</body>
+</html>
diff --git a/nodemon.json b/nodemon.json
@@ -0,0 +1,15 @@
+{
+  "restartable": "rs",
+  "ignore": [
+    ".git",
+    "node_modules/**/node_modules"
+  ],
+  "verbose": true,
+  "watch": [
+    "server.js"
+  ],
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "ext": "js json"
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "scripts": {
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "body-parser": "^1.17.2",
+    "express": "^4.15.3",
+    "nodemon": "^1.11.0",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-hot-loader": "3.0.0-beta.7",
+    "react-router": "3.0.5",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-hot-middleware": "^2.18.0"
+  }
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,5 @@
+## react-router-hmr-case
+
+How to make react router v3 works with react-hot-loader
+
+`npm run dev`
diff --git a/server.js b/server.js
@@ -0,0 +1,37 @@
+const express = require('express');
+const { resolve } = require('path');
+const bodyParser = require('body-parser');
+
+const app = new express();
+const PORT = process.env.PORT || 3000;
+const ENV = process.env.NODE_ENV;
+
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const webpackConfig = require('./webpack.config');
+
+const compiler = webpack(webpackConfig);
+
+app.use(webpackDevMiddleware(compiler, {
+  hot: true,
+  publicPath: webpackConfig.output.publicPath,
+  inline: true,
+  noInfo: true,
+}));
+app.use(webpackHotMiddleware(compiler));
+
+app.use(express.static(resolve(__dirname, '../dist')));
+app.use('/', (req, res) => {
+  res
+    .sendFile(resolve(__dirname, 'index.html'));
+});
+
+// Run server
+app.listen(PORT, () => {
+  // eslint-disable-next-line no-console
+  console.log(`running on http://localhost:${PORT} in ${ENV} enviroment `);
+});
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+class App extends React.Component {
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div>
+        <Link to='/'>Home</Link> | <Link to='/about'>About</Link>
+        <br />
+        {children}
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import { match, Router, browserHistory } from 'react-router';
+
+import App from './App';
+import routes from './routes';
+
+const mountNode = document.getElementById('root');
+
+const render = () => {
+  match({
+    history: browserHistory,
+    routes,
+  }, (error, redirectLocation, renderProps) => {
+    ReactDOM.render(
+      <AppContainer>
+        <Router {...renderProps} />
+      </AppContainer>,
+      mountNode,
+    );
+  });
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./App', render);
+}
diff --git a/src/pages/About.js b/src/pages/About.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <div className="about-page">
+    About
+  </div>
+);
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <div className="home-page">
+    Home
+  </div>
+);
diff --git a/src/routes.js b/src/routes.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Route, IndexRoute } from 'react-router';
+
+import App from './App';
+import Home from './pages/Home';
+import About from './pages/About';
+
+export default (
+  <Route path="/" component={App}>
+    <IndexRoute component={Home} />
+    <Route path="about" component={About} />
+  </Route>
+);
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,42 @@
+const webpack = require('webpack');
+const { join, resolve } = require('path');
+
+module.exports = {
+  entry: {
+    app: [
+      'react-hot-loader/patch',
+      'webpack-hot-middleware/client',
+      resolve(__dirname, './src/index.js'),
+    ],
+    vendor: [
+      'react',
+      'react-dom',
+      'react-router',
+    ],
+  },
+  output: {
+    path: resolve(__dirname, 'dist'),
+    publicPath: '/static/',
+    filename: '[name].js',
+  },
+  context: resolve(__dirname, 'src'),
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        include: join(__dirname, 'src'),
+      },
+    ],
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity,
+      filename: 'vendor.js',
+    }),
+  ],
+};