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

Allow to run multiple projects at same time

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');