From 96a65bdfe8df3897046b2b2082b71fd622a431f4 Mon Sep 17 00:00:00 2001 From: Roy Yu Date: Sat, 21 Apr 2018 11:07:30 -0700 Subject: [PATCH 1/3] Allow to run multiple projects at same time --- README.md | 11 +++++++++++ bin/commands.js | 6 +++++- config/default.json | 7 +++++-- package.json | 2 +- webpack.config.dev.js | 43 ++++++++++++++++++++++++++---------------- webpack.config.prod.js | 2 +- 6 files changed, 50 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index e37d85c..cfe379e 100644 --- a/README.md +++ b/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 :- diff --git a/bin/commands.js b/bin/commands.js index e23cde9..baa7cee 100644 --- a/bin/commands.js +++ b/bin/commands.js @@ -5,6 +5,10 @@ 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) { @@ -12,7 +16,7 @@ switch (option) { 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`); diff --git a/config/default.json b/config/default.json index 6bb1f76..400d26c 100644 --- a/config/default.json +++ b/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", diff --git a/package.json b/package.json index 971be1b..cd04a0d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.9.56", "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", diff --git a/webpack.config.dev.js b/webpack.config.dev.js index a6abf73..ec471f8 100644 --- a/webpack.config.dev.js +++ b/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: [ diff --git a/webpack.config.prod.js b/webpack.config.prod.js index ea8f2ee..bfa2cf0 100644 --- a/webpack.config.prod.js +++ b/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'); From 8cf43714f0300b6fce342c2a381f5c37a09ff441 Mon Sep 17 00:00:00 2001 From: Roy Yu Date: Sat, 21 Apr 2018 11:11:47 -0700 Subject: [PATCH 2/3] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cd04a0d..1d84bd1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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 DASHBOARD_PORT=9901 webpack-dashboard -p 9901 -c red -t dashboard -- node bin/commands.js dev", From 24d7e2644365a3285f19562feef041a4d39d63bc Mon Sep 17 00:00:00 2001 From: Roy Yu Date: Sat, 21 Apr 2018 11:23:47 -0700 Subject: [PATCH 3/3] upgrade dependencies --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1d84bd1..5aa5ff5 100644 --- a/package.json +++ b/package.json @@ -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" },