Trying out React Hot Loader for the widgets page

Author: booleanhunter

reactjs-adminlte/package.json

@@ -15,6 +15,11 @@
     "babel-core": "~6.5.1",
     "babel-loader": "~6.2.2",
     "babel-preset-es2015": "~6.5.0",
-    "babel-preset-react": "~6.5.0"
+    "babel-preset-react": "~6.5.0",
+    "react": "~0.14.7"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "~1.14.1",
+    "react-hot-loader": "~1.3.0"
   }
 }

reactjs-adminlte/public/dist/js/buttons.bundle.js

@@ -14,13 +14,29 @@ app.set('view engine', 'html');
 app.engine('html', consolidate.handlebars);
 app.use(express.static('./public')); //Set the folder from where you serve all static files like images, css, javascripts, libraries etc
 app.use(bodyParser.urlencoded({ extended: true }));
-var portNumber = 8080;
+var portNumber = 8000;
 
 http.createServer(app).listen(portNumber, function(){
 	console.log('Server listening at port '+ portNumber);
 	routes.initialize(app);
 });
 
+// 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');
+// });
+
 /*
 
 

reactjs-adminlte/public/dist/js/dashboardV1.bundle.js

@@ -39,6 +39,14 @@
     <script src="/dist/js/vendors.js"></script>
     <script src="/dist/js/widgets.bundle.js"></script>
 
+
+<!--Use this only in development, while using React Hot Loader -->
+<!--     
+    <script src="http://localhost:8080/dist/js/vendors.js"></script>
+    <script src="http://localhost:8080/dist/js/widgets.bundle.js"></script>
+ -->
+
+ 
 <!--
     <script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
     <script src="../bootstrap/js/bootstrap.min.js"></script>

reactjs-adminlte/public/dist/js/generalUIElements.bundle.js

@@ -14,7 +14,7 @@ var config = {
 
     resolve: {
         alias: {
-            react: lib_dir + '/react.js',
+            react: node_dir + '/react',
             reactDom: lib_dir + '/react-dom',
             jquery: lib_dir + '/jQuery-2.1.4.min.js',
             velocity: lib_dir + '/velocity.min.js',
@@ -36,6 +36,7 @@ var config = {
     },   
 
     plugins: [
+        //new webpack.HotModuleReplacementPlugin(),
         new webpack.ProvidePlugin({
             '$': "jquery",
             'jQuery': "jquery",
@@ -49,11 +50,11 @@ var config = {
 
     entry: {
         dashboardV1: './public/src/dashboardV1/js/main',
-        widgets: './public/src/widgets/js/main',
+        widgets: ['./public/src/widgets/js/main'],
         timeline: './public/src/timeline-page/js/main',
         buttons: './public/src/buttons/js/main',
         generalUIElements: './public/src/ui-elements/general/js/main',
-        vendors: ['react','reactDom','jquery','velocity','jqueryUi','bootstrap','moment','bootstrapDatepicker','slimscroll','fastclick']
+        vendors: ['react','reactDom','jquery','velocity','jqueryUi','bootstrap','moment','bootstrapDatepicker','slimscroll','fastclick'],
     },
 
     output: {
@@ -68,10 +69,16 @@ var config = {
         ],
         loaders: [
             { 
+                test: /\.jsx?$/, 
+                loaders: ['react-hot'],
+                include: path.join(__dirname, 'public')
+
+            },{ 
                loader: 'babel', //'jsx-loader'
                 query: {
                     presets: ['react', 'es2015']
-                } 
+                },
+                include: path.join(__dirname, 'public')
             }, 
         ]
     }
@@ -84,6 +91,9 @@ module.exports = config;
 ----------
 View package.json for more configuration details
 
+0. During development:-
+    Run webpack-dev-server --hot --inline and point your entry files to http://localhost:8080 in your HTML, for HMP
+
 1. Command:- 
     webpack --profile --json > stats.json