Merge pull request iroy2000#48 from iroy2000/allow-multiple-project-same-time

Allow to run multiple projects at same time

Author: iroy2000

README.md

@@ -97,6 +97,7 @@ Basic
 1. [Folder Structure](#folder-structure)
 1. [Production Readiness](#production-readiness)
 1. [Configuration](#configuration)
+1. [Port Configuration](#port-configuration)
 1. [Installing Dependencies](#installing-dependencies)
 
 Advanced
@@ -303,6 +304,16 @@ __Just remember__, `.env` file suppose to keep your secret, and prevent your fro
 
 We are using [dotenv](https://github.com/motdotla/dotenv) for the `.env` feature, they have pretty good documentation.
 
+## Port Configuration
+There will be a chance that you will need your port to be other than `8080`.  For example, your local backend service might already take `8080`; Or you want to run multiple project, one on `8080` and one on `80801`.
+
+If you are running one project that needs a different port, you can just modify one place
+1) `default.json` --> `port` section.
+
+But if you want to run multiple projects at the same time, you will need to configure ports in two places
+1) `default.json` --> `port`
+2) Dashboard port --> `package.json` --> `dev`  ( default dashboard port is `9901` )
+
 ## Installing Dependencies
 
 We are using `npm` in this project, so if you would like to install a dependencies, for example, D3, you can do something like the following :-

bin/commands.js

@@ -5,14 +5,18 @@ const colors = require('colors');
 const host = config.get('host') || 'localhost';
 const port = config.get('port') || '8080';
 
+console.log('using settings:');
+console.log('\thost:', host);
+console.log('\tport:', port);
+
 const option = process.argv[2];
 
 switch (option) {
   case 'lint':
     shell.exec('cross-env eslint src/js/** server/** --format node_modules/eslint-friendly-formatter . --ext .js --ext .jsx  --cache; exit 0');
     break;
   case 'dev':
-    shell.exec(`cross-env HOST=${host} PORT=${port} webpack-dev-server --hot --progress --inline --colors --content-base ./docroot`);
+    shell.exec(`cross-env HOST=${host} PORT=${port} webpack-dev-server --hot --progress --no-info --inline --colors --content-base ./docroot`);
     break;
   case 'build':
     shell.exec(`cross-env rimraf docroot && webpack --progress --display-error-details`);

config/default.json

@@ -1,11 +1,10 @@
 {
   "env": "default",
-  "publicPath": "localhost:8080",
   "host": "localhost",
   "port": "8080",
   "jsSourcePath": "src/js",
-  "s3Deploy": false,
   "s3": {
+    "s3Deploy": false,
     "bucket": "if-any",
     "defaultCDNBase": "if-any"
   },
@@ -17,6 +16,10 @@
       "port": 8888
     }
   },
+  "browserSync": {
+    "active": true,
+    "port": 3002
+  },
   "html": [
     {
 			"name": "homepage",

package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-redux-boilerplate",
-  "version": "0.9.56",
+  "version": "0.9.58",
   "description": "React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build process framework out of the box.",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dashboard -p 3300 -c red -t dashboard -- node bin/commands.js dev",
+    "dev": "cross-env NODE_ENV=development DASHBOARD_PORT=9901 webpack-dashboard -p 9901 -c red -t dashboard -- node bin/commands.js dev",
     "build": "cross-env NODE_ENV=production node bin/commands.js build",
     "build:release": "cross-env NODE_ENV=release node bin/commands.js build",
     "clean": "rimraf docroot",
@@ -93,8 +93,8 @@
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^4.0.8",
-    "redux": "^3.7.2",
-    "redux-actions": "^2.2.1",
+    "redux": "^4.0.0",
+    "redux-actions": "^2.3.0",
     "redux-saga": "^0.16.0",
     "reselect": "^3.0.1"
   },

webpack.config.dev.js

@@ -1,14 +1,13 @@
 import config from 'config';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import BrowserSyncPlugin from 'browser-sync-webpack-plugin';
 import DashboardPlugin from 'webpack-dashboard/plugin';
 import precss from 'precss';
 import postcssCssnext from 'postcss-cssnext';
 
 import webpackConfig, { JS_SOURCE } from './webpack.config.common';
 
-const PUBLIC_PATH = config.get('publicPath');
+const PUBLIC_PATH = `${config.get('host')}:${config.get('port')}`;
 const APP_ENTRY_POINT = `${JS_SOURCE}/router`;
 
 const webpackDevOutput = {
@@ -43,7 +42,11 @@ const htmlPlugins = html.map((page) =>
 );
 
 webpackConfig.plugins.push(
-  new DashboardPlugin({ port: 3300 }),
+  new DashboardPlugin({
+    port: process.env.DASHBOARD_PORT,
+    minified: false,
+    gzip: false,
+  }),
   new webpack.LoaderOptionsPlugin({
     debug: true
   }),
@@ -56,21 +59,29 @@ webpackConfig.plugins.push(
       NODE_ENV: JSON.stringify('development'),
     },
   }),
-  new BrowserSyncPlugin({
-    host: 'localhost',
-    port: 3001,
-    proxy: `http://localhost:${process.env.PORT}/`,
-
-    // Prevents BrowserSync from automatically opening up the app in your browser
-    open: false,
-    reloadDelay: 2500,
-  }, {
-    // Disable BrowserSync's browser reload/asset injections feature because
-    // Webpack Dev Server handles this for us already
-    reload: false,
-  })
 );
 
+// We turn off browserSync by default
+// Turn that on if you want to include this use case
+if(config.get('browserSync.active') === true) {
+  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+  webpackConfig.plugins.push(
+    new BrowserSyncPlugin({
+      host: 'localhost',
+      port: config.get('browserSync.port'),
+      proxy: `http://localhost:${process.env.PORT}/`,
+
+      // Prevents BrowserSync from automatically opening up the app in your browser
+      open: false,
+      reloadDelay: 2500,
+    }, {
+      // Disable BrowserSync's browser reload/asset injections feature because
+      // Webpack Dev Server handles this for us already
+      reload: false,
+    })
+  );
+}
+
 webpackConfig.module.rules = webpackConfig.module.rules.concat({
   test: /\.css$/,
   use: [

webpack.config.prod.js

@@ -13,7 +13,7 @@ import webpackConfig, { JS_SOURCE } from './webpack.config.common';
 //  CONSTANT DECLARATION
 // ----------------------------------------------------------
 
-const S3_DEPLOY = config.get('s3Deploy') || 'false';
+const S3_DEPLOY = config.get('s3.s3Deploy') || 'false';
 const IS_S3_DEPLOY = String(S3_DEPLOY) === 'true';
 
 const PUBLIC_PATH = IS_S3_DEPLOY ? process.env.AWS_CDN_URL : config.get('publicPath');