Css modules and HMR fix

margaretjoanmiller · Feb 10, 2016 · 716aad2 · 716aad2
1 parent 9aa787f
commit 716aad2
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 19 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]   
+  "presets": ["react", "es2015"],
 }
diff --git a/index.js b/index.js
@@ -1,3 +1,4 @@
 require('babel-core/register');
 require('babel-polyfill');
+require('css-modules-require-hook');
 require('./server/server');
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "f-iso",
+  "name": "mern-starter",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -8,8 +8,9 @@
     "test:server": "NODE_ENV=development MONGO_URL=mongodb://localhost:27017/mern-test mocha --compilers js:babel-core/register --recursive server/tests/**/*.spec.js",
     "start": "NODE_ENV=development node index.js",
     "start:prod": "NODE_ENV=production node index.js",
+    "bs": "npm run clean && npm run build && npm run start:prod",
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "clean": "rimraf dist",
+    "clean": "rimraf static/dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint shared client"
   },
@@ -39,10 +40,12 @@
     "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.1.0",
     "babel-register": "^6.4.3",
     "chai": "^3.5.0",
     "cross-env": "^1.0.7",
     "css-loader": "^0.23.1",
+    "css-modules-require-hook": "^2.1.0",
     "deep-freeze": "0.0.1",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "^4.0.0",
@@ -58,7 +61,6 @@
     "supertest": "^1.1.0",
     "webpack": "^1.12.12",
     "webpack-dev-middleware": "^1.5.1",
-    "webpack-dev-server": "^1.14.1",
     "webpack-hot-middleware": "^2.6.4"
   }
 }
diff --git a/server/server.js b/server/server.js
@@ -47,7 +47,6 @@ const renderFullPage = (html, initialState) => {
     <html>
       <head>
         <meta charset="utf-8">
-        <link rel="stylesheet" href="/css/app.css" type="text/css" />
         <title>Isomorphic Redux Example</title>
       </head>
       <body>

diff --git a/shared/components/PostCreateView/PostCreateView.js b/shared/components/PostCreateView/PostCreateView.js
@@ -20,7 +20,7 @@ class PostCreateView extends Component {
   render() {
     return (
       <div className="form">
-        <input placeholder="Name" ref="name"/><br/>
+        <input placeholder="Name" className='input' ref="name"/><br/>
         <input placeholder="Title" ref="title"/><br/>
         <textarea placeholder="Content" ref="content"></textarea><br/>
         <button onClick={this.addPost}>Submit</button>

diff --git a/shared/container/PostDetailView/PostDetailView.js b/shared/container/PostDetailView/PostDetailView.js
@@ -13,7 +13,7 @@ class PostDetailView extends Component {
     return (
         <div>
           <span>Name: {this.props.post.name}</span>
-          <span>Title: {this.props.post.title}</span>
+          <span>Titles: {this.props.post.title}</span>
           <span>Content: {this.props.post.content}</span>
         </div>
       );

diff --git a/shared/redux/store/configureStore.js b/shared/redux/store/configureStore.js
@@ -4,13 +4,13 @@ import thunk from 'redux-thunk';
 
 export function configureStore(initialState) {
   const store = createStore(rootReducer, initialState, applyMiddleware(thunk));
-  // if (module.hot) {
-  //   // Enable Webpack hot module replacement for reducers
-  //   module.hot.accept('../redux/reducers/reducer', () => {
-  //     const nextReducer = require('../reducers')
-  //     store.replaceReducer(nextReducer)
-  //   })
-  // }
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers/reducer', () => {
+      const nextReducer = require('../reducers/reducer')
+      store.replaceReducer(nextReducer)
+    })
+  }
 
   return store;
 }
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -2,9 +2,11 @@ var webpack = require('webpack');
 var path = require('path');
 
 module.exports = {
-  devtool: 'eval-source-map', 
+  devtool: 'cheap-module-eval-source-map', 
 
-  entry: __dirname + "/client/index.js",
+  entry: ['webpack-hot-middleware/client',
+          './client/index.js'
+  ],
 
   output: {
     path: __dirname + '/dist/',
@@ -21,7 +23,10 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel'
+        loader: 'babel',
+        query: {
+          presets: ['react-hmre']
+        }
       }
     ]
   },

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -16,14 +16,14 @@ module.exports = {
     loaders: [
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+        loader: ExtractTextPlugin.extract('style','css?modules'),
       },
       {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel'
       }
-    ]
+    ],
   },
 
   plugins: [
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,6 @@ const renderFullPage = (html, initialState) => { @@
         <html>
           <head>
             <meta charset="utf-8">
-            <link rel="stylesheet" href="/css/app.css" type="text/css" />
             <title>Isomorphic Redux Example</title>
           </head>
           <body>
@@ Expand Down @@