Make hot-reload server work w/ react_on_rails gem

justin808 · justin808 · commit 7d431a5b7d48 · 2015-09-07T22:31:42.000-10:00
* Need to export App from App.jsx
* Removed specifying stage for babel in the loader.
* Move exposing React to webpack.common.config.js for page rendering.
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
@@ -16,6 +16,4 @@
   </li>
 </ul>
 <hr/>
-<div id="content">
-  <%= react_component('App') %>
-</div>
+<%= react_component('App', {}, prerender: false) %>
diff --git a/client/assets/javascripts/App.jsx b/client/assets/javascripts/App.jsx
@@ -4,11 +4,16 @@ import { Provider } from 'react-redux';
 import CommentScreen from './components/CommentScreen';
 import CommentStore from './stores/CommentStore';
 
-window.App = () => {
+const App = () => {
   const reactComponent = (
     <Provider store={CommentStore}>
       {() => <CommentScreen />}
     </Provider>
   );
   return reactComponent;
 };
+
+window.App = App;
+
+// Export is needed for the hot reload server
+export default App;
diff --git a/client/index.html b/client/index.html
@@ -6,5 +6,8 @@
   </head>
   <body>
     <div id="content"></div>
+    <script>
+       React.render(App(), document.getElementById('content'));
+    </script>
   </body>
 </html>
diff --git a/client/webpack.common.config.js b/client/webpack.common.config.js
@@ -20,6 +20,9 @@ module.exports = {
     extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.scss', '.css', 'config.js'],
   },
   module: {
-    loaders: [],
+    loaders: [
+      // React is necessary for the client rendering:
+      {test: require.resolve('react'), loader: 'expose?React'}
+    ],
   },
 };
diff --git a/client/webpack.hot.config.js b/client/webpack.hot.config.js
@@ -27,7 +27,7 @@ config.resolve.root.push(path.join(__dirname, 'assets/stylesheets'));
 
 // All the styling loaders only apply to hot-reload, not rails
 config.module.loaders.push(
-  {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
+  {test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
   {test: /\.css$/, loader: 'style-loader!css-loader'},
   {
     test: /\.scss$/,
diff --git a/client/webpack.rails.config.js b/client/webpack.rails.config.js
@@ -20,15 +20,12 @@ config.entry.push('./scripts/rails_only');
 // See webpack.common.config for adding modules common to both the webpack dev server and rails
 
 config.module.loaders.push(
-  {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
+  {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
 
   // Next 2 lines expose jQuery and $ to any JavaScript files loaded after client-bundle.js
   // in the Rails Asset Pipeline. Thus, load this one prior.
   {test: require.resolve('jquery'), loader: 'expose?jQuery'},
-  {test: require.resolve('jquery'), loader: 'expose?$'},
-
-  // React is necessary for the client rendering:
-  {test: require.resolve('react'), loader: 'expose?React'}
+  {test: require.resolve('jquery'), loader: 'expose?$'}
 );
 module.exports = config;
 

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ config.resolve.root.push(path.join(__dirname, 'assets/stylesheets'));`
`27`	`27`
`28`	`28`	`// All the styling loaders only apply to hot-reload, not rails`
`29`	`29`	`config.module.loaders.push(`
`30`		`- {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},`
	`30`	`+ {test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},`
`31`	`31`	`{test: /\.css$/, loader: 'style-loader!css-loader'},`
`32`	`32`	`{`
`33`	`33`	`test: /\.scss$/,`