fix webpack dev build. update build process.

hongkheng · Aug 17, 2016 · 53a810e · 53a810e
1 parent 55ac9e7
commit 53a810e
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,21 @@
 # Reactified version of Visualization of HDB Resale Market
 
-Original repo: [https://github.com/yongjun21/hdb-resale](https://github.com/yongjun21/hdb-resale)
+Original repo: [https://github.com/yongjun21/hdb-resale](https://github.com/yongjun21/hdb-resale)
+
+# Build
+
+`npm install`
+
+### Dev
+
+```
+ npm run start or NODE_ENV=development npm run start
+
+```
+
+### Release
+
+```
+NODE_ENV=production npm run start
+
+```
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -12,13 +12,11 @@
   <script defer src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <!-- Google Maps script -->
   <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDZ7kA90kT6tiOfVciR1L8hK-avHkJLP3o&libraries=visualization&callback=googleOnLoadCallback"></script>
-  <script defer src="/bundle.js"></script>
-
-
 
 </head>
 <body>
   <div id="root"></div>
+  <script defer src="/bundle.js"></script>
   <script>
     window.googleMapsLoaded = new Promise(function (resolve) {
       window.googleOnLoadCallback = resolve

diff --git a/package.json b/package.json
@@ -4,13 +4,16 @@
   "description": "React version of web visualization project",
   "main": "index.js",
   "scripts": {
-    "start-prod": "npm run build && npm run start-server",
-    "start-dev": "webpack-dev-server --host localhost --port 8080 --progress --colors --inline --hot --config ./webpack.config.js",
+    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
+    "start:dev": "npm run build:dev && npm run start-server",
+    "start:prod": "npm run build:release && npm run start-server",
+    "webpack:dev": "webpack-dev-server --host 0.0.0.0 --port 9000 --progress --colors --hot --inline --config ./webpack.dev.config.js",
     "start-server": "node server_dist/server.js",
-    "build": "npm run clean && npm run build-server & npm run build-js",
+    "build:dev": "npm run clean && npm run build-server",
+    "build:release": "npm run clean && npm run build-server && npm run build-js",
     "build-server": "babel server_src --out-dir server_dist",
     "clean": "rm -rf server_dist",
-    "build-js": "webpack --progress --colors --config ./webpack.config.js"
+    "build-js": "webpack --progress --colors --config ./webpack.prod.config.js"
   },
   "contributors": [
     {
@@ -42,12 +45,13 @@
     "babel-preset-stage-2": "^6.13.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
+    "if-env": "^1.0.0",
     "postcss-cssnext": "^2.7.0",
     "postcss-loader": "^0.9.1",
     "react-hot-loader": "^1.3.0",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
     "body-parser": "^1.15.2",
@@ -66,6 +70,9 @@
     "whatwg-fetch": "^1.0.0"
   },
   "semistandard": {
-    "global": ["Plotly", "google"]
+    "global": [
+      "Plotly",
+      "google"
+    ]
   }
 }
diff --git a/server_src/server.dev.js b/server_src/server.dev.js
@@ -0,0 +1,19 @@
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import config from '../webpack.dev.config';
+
+module.exports = function() {
+
+  let server = new WebpackDevServer(webpack(config), {
+    contentBase: './dist',
+    hot: true,
+    historyApiFallback: true,
+    proxy: {
+      '*': 'http://localhost:8080'
+    }
+  }).listen(9000, '0.0.0.0', function (err, result) {
+    if (err) console.log(err);
+    console.log('Listening at 0.0.0.0:9000');
+  });
+
+}
diff --git a/server_src/server.js b/server_src/server.js
@@ -2,26 +2,16 @@ import app from './app.js';
 
 const port = process.env.PORT || 8080;
 
-app.listen(port);
-console.log('Listening on port:' + port);
+const node_env = process.env.NODE_ENV|| 'development';
+
+console.log('node env', node_env);
+
+if (node_env === 'development') {
 
-// TODO: refactor this code away from production code
-// this if for development only
+  const wpBundle = require('./server.dev');
+  wpBundle();
 
-// import webpack from 'webpack';
-// import WebpackDevServer from 'webpack-dev-server';
-// import config from './webpack.config';
-//
-// let server = new WebpackDevServer(webpack(config), {
-//   contentBase: './dist',
-//   hot: true,
-//   historyApiFallback: true,
-//   proxy: {
-//     '*': 'http://localhost:8080'
-//   }
-// });
-//
-// server.listen(port, function (err, result) {
-//   if (err) console.log(err);
-//   console.log('Listening at 0.0.0.0:9000');
-// });
+}
+
+app.listen(port);
+console.log('Listening at: ' + port);
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -44,7 +44,7 @@ export default class About extends React.Component {
             <li>User can toggle between two modes: <b>Average</b> & <b>Min, Max & Median</b>.</li>
             <li>User chooses the <b>town</b> and returned chart is a set of time-series broken down by <b>flat types</b>.</li>
             <li>Click on any point on the chart to bring out a list of all the transactions
-            in the selcted tow"n for the month and flat type.</li>
+            in the selcted town for the month and flat type.</li>
           </ul>
 
           <h3>Average</h3>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -10,7 +10,7 @@ export default class Footer extends React.Component {
     return (
       <footer>
         <div className='footer-text'>
-          Data retrieved <span className='retrieve-date'>{parseDate(this.props.retrievedDate)}</span> from <a href='https://data.gov.sg/dataset/resale-flat-prices'>data.gov.sg</a>.
+          Data retrieved <span className='retrieve-date'>{parseDate(this.props.retrieveDate)}</span> from <a href='https://data.gov.sg/dataset/resale-flat-prices'>data.gov.sg</a>.
         </div>
         <div className='footer-text'>
           Developed by <a href='https://github.com/yongjun21'>Thong Yong Jun</a> &amp; <a href='https://github.com/caalberts'>Albert Salim</a>.

diff --git a/src/css/style.css b/src/css/style.css
@@ -537,6 +537,7 @@ footer {
 }
 
 .footer-text a {
+  text-decoration: none;
   display: inline-block;
   box-sizing: border-box;
 }

diff --git a/server_src/webpack.config.js → webpack.dev.config.js b/server_src/webpack.config.js → webpack.dev.config.js
@@ -3,7 +3,7 @@ let Webpack = require('webpack');
 
 module.exports = {
   entry: [
-    'webpack-dev-server/client?http://localhost:8080',
+    'webpack-dev-server/client?http://0.0.0.0:9000',
     'webpack/hot/only-dev-server',
     './src/index.js'
   ],

diff --git a/webpack.config.js → webpack.prod.config.js b/webpack.config.js → webpack.prod.config.js