configurable port and multiple export fix

tsaiDavid · Dec 15, 2016 · 4ec02a1 · 4ec02a1
1 parent fb35cae
commit 4ec02a1
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ This project features a super simple UI - just for you to see how everything is
 
 ![](https://fat.gfycat.com/WarlikeFrightenedGraywolf.gif)
 
-If you found this helpful, please star/fork/follow me on **[GitHub](https://github.com/tsaiDavid/)** and follow me on **[Twitter](https://twitter.com/tftsai)**! 
+If you found this helpful, please star/fork/follow me on **[GitHub](https://github.com/tsaiDavid/)** and follow me on **[Twitter](https://twitter.com/tftsai)**!
 
 ### Features
 
@@ -79,7 +79,7 @@ Ideally, fork this boilerplate, then clone.
 $ git clone https://github.com/YOUR_GITHUB_USERNAME_HERE/simple-redux-boilerplate.git
 ```
 
-Install required dependencies. 
+Install required dependencies.
 (*Did you make sure you have the right version of Node?*)
 ```
 npm install
@@ -90,11 +90,17 @@ Run development server, complete with DevTools and related configuration.
 npm run dev
 ```
 
-You're now ready to get working! *(enter command or visit via browser directly)*
+You're now ready to get working! *(enter command or visit via browser directly)*.
 ```
 open http://localhost:3000/
 ```
 
+If you wish not free your system 3000 port. Then just pass the port you wish
+```
+npm start --port=3003
+```
+open http://localhost:3003/
+
 ***
 
 ##### Next Steps & Other Notes:

diff --git a/devServer.js b/devServer.js
@@ -6,6 +6,9 @@ const config = require('./webpack.config.dev');
 const app = express();
 const compiler = webpack(config);
 
+const host = 'http://localhost';
+const port = process.env.npm_config_port ? process.env.npm_config_port : 3000;
+
 app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true,
   publicPath: config.output.publicPath
@@ -17,11 +20,10 @@ app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'index.html'));
 });
 
-app.listen(3000, 'localhost', (err) => {
+app.listen(port, 'localhost', (err) => {
   if (err) {
     console.log(err);
     return;
   }
-
-  console.log('Listening at http://localhost:3000');
+  console.info('==> Listening on port %s. Open up %s:%s/ in your browser.', port, host, port);
 });
diff --git a/index.html b/index.html
@@ -1,10 +1,12 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <title>Simple Redux Boilerplate</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no" />
   </head>
   <body>
     <div id="root"></div>
-    <script src="/static/bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "description": "My simple redux application.",
   "scripts": {
     "clean": "rimraf dist",
-    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build": "npm run clean && npm run build:webpack",
+    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --progress --profile --colors",
+    "build": "npm run clean && npm run build:webpack --progress --profile --colors",
     "dev": "NODE_ENV=development npm start",
     "start": "node devServer.js",
     "lint": "eslint src"
@@ -32,6 +32,7 @@
     "eslint-plugin-react": "^3.16.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
+    "html-webpack-plugin": "^2.24.1",
     "node-sass": "^3.4.2",
     "redux-devtools": "^3.0.1",
     "redux-devtools-dock-monitor": "^1.0.1",

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -10,7 +10,7 @@ import Footer from '../components/Footer';
  * Again, this is because it serves to wrap the rest of our application with the Provider
  * component to make the Redux store available to the rest of the app.
  */
-export default class App extends Component {
+class App extends Component {
   render() {
     // we can use ES6's object destructuring to effectively 'unpack' our props
     const { counter, actions } = this.props;

diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   devtool: 'cheap-module-eval-source-map',
@@ -10,8 +11,8 @@ module.exports = {
   ],
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
-    publicPath: '/static/'
+    filename: '[name]-[hash].js',
+    publicPath: '/'
   },
   plugins: [
     /**
@@ -25,6 +26,17 @@ module.exports = {
      * the bail option.
      */
     new webpack.NoErrorsPlugin(),
+    /**
+     * This is a webpack plugin that simplifies creation of HTML files to serve your
+     * webpack bundles. This is especially useful for webpack bundles that
+     * include a hash in the filename which changes every compilation.
+     */
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      filename: 'index.html',
+      title: 'Simple Redux Boilerplate',
+      inject: 'body'
+    }),
     /**
      * DefinePlugin allows us to define free variables, in any webpack build, you can
      * use it to create separate builds with debug logging or adding global constants!

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   devtool: 'source-map',
@@ -8,8 +9,8 @@ module.exports = {
   ],
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: 'bundle.js',
-    publicPath: '/static/'
+    filename: '[name]-[hash].js',
+    publicPath: '/'
   },
   plugins: [
     /**
@@ -18,6 +19,17 @@ module.exports = {
      * more predictable.
      */
     new webpack.optimize.OccurenceOrderPlugin(),
+    /**
+     * This is a webpack plugin that simplifies creation of HTML files to serve your
+     * webpack bundles. This is especially useful for webpack bundles that
+     * include a hash in the filename which changes every compilation.
+     */
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      filename: 'index.html',
+      title: 'Simple Redux Boilerplate',
+      inject: 'body'
+    }),
     /**
      * See description in 'webpack.config.dev' for more info.
      */