From 010c9526e47832e0b9f4a718ae25174af1b2a241 Mon Sep 17 00:00:00 2001 From: Kaijun Date: Tue, 15 Mar 2016 02:00:20 +0100 Subject: [PATCH 1/2] add api-server --- package.json | 23 +++++++++++++---------- server/index.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 10 deletions(-) create mode 100644 server/index.js diff --git a/package.json b/package.json index 6b02a90..8c76e50 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3000", - "build": "NODE_ENV=production webpack --progress --colors" + "start": "node server/index.js", + "build": "NODE_ENV=production webpack --progress --colors", + "serve": "npm run build & NODE_ENV=production npm run start" }, "license": "MIT", "devDependencies": { @@ -17,16 +18,13 @@ "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", + "babel-runtime": "^6.5.0", + "classnames": "^2.2.3", + "connect-history-api-fallback": "^1.1.0", "css-loader": "^0.23.1", + "express": "^4.13.4", "file-loader": "^0.8.5", "postcss-loader": "^0.8.1", - "rucksack-css": "^0.8.5", - "style-loader": "^0.13.0", - "webpack": "^1.12.14", - "webpack-dev-server": "^1.14.1", - "webpack-hot-middleware": "^2.7.1", - "babel-runtime": "^6.5.0", - "classnames": "^2.2.3", "react": "^0.14.7", "react-dom": "^0.14.7", "react-hot-loader": "^1.3.0", @@ -34,6 +32,11 @@ "react-router": "^2.0.0", "react-router-redux": "^4.0.0", "redux": "^3.3.1", - "redux-actions": "^0.9.1" + "redux-actions": "^0.9.1", + "rucksack-css": "^0.8.5", + "style-loader": "^0.13.0", + "webpack": "^1.12.14", + "webpack-dev-server": "^1.14.1", + "webpack-hot-middleware": "^2.7.1" } } diff --git a/server/index.js b/server/index.js new file mode 100644 index 0000000..72c302b --- /dev/null +++ b/server/index.js @@ -0,0 +1,47 @@ +const express = require('express') +const webpack = require('webpack') +const WebpackDevServer = require('webpack-dev-server') +const webpackConfig = require('../webpack.config.js') +const history = require('connect-history-api-fallback'); +const CLIENT_PORT = 3000 +const SERVER_PORT = 3001 + +const app = express() + +if(app.get('env') === 'development'){ + + //enable HotReplacementPlugin + webpackConfig.entry.jsx = [webpackConfig.entry.jsx] + webpackConfig.entry.jsx.unshift(`webpack-dev-server/client?http://localhost:${CLIENT_PORT}/`, "webpack/hot/dev-server") + webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()) + + const devServer= new WebpackDevServer(webpack(webpackConfig), { + contentBase: __dirname + '/../client', //seems doesn't effect + hot: true, + historyApiFallback: true, + + //proxy the server port, so that easy to avoid cross-domain while requesting the APIs + proxy: { + "/api/*": `http://localhost:${SERVER_PORT}` + }, + + // webpack-dev-middleware options + stats: { colors: true }, + }).listen(CLIENT_PORT) + +} +else{ + app.use(history()) + app.use(express.static(__dirname + '/../static')) +} + +app.get('/test', function (req, res) { + res.send('Hello World!') +}); +app.get('/api/test', function (req, res) { + res.send('Hello World!') +}); + +app.listen(SERVER_PORT, function () { + console.log(`Example app listening on port ${SERVER_PORT}!`) +}); \ No newline at end of file From a1c4eba9fc3974bb008d5db83d9dd7d0b945ee2d Mon Sep 17 00:00:00 2001 From: Kaijun Date: Tue, 15 Mar 2016 15:03:31 +0100 Subject: [PATCH 2/2] clean up --- package.json | 2 +- server/index.js | 26 +++++++++++--------------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 8c76e50..2ef6444 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "start": "node server/index.js", "build": "NODE_ENV=production webpack --progress --colors", - "serve": "npm run build & NODE_ENV=production npm run start" + "start@prod": "npm run build & NODE_ENV=production npm run start" }, "license": "MIT", "devDependencies": { diff --git a/server/index.js b/server/index.js index 72c302b..3b4d15e 100644 --- a/server/index.js +++ b/server/index.js @@ -8,40 +8,36 @@ const SERVER_PORT = 3001 const app = express() +/* + Development Env: enable the HotReplacementPugin dynamically + Production Env: Set the Server's static path to the webpack build(output) path. +*/ if(app.get('env') === 'development'){ - - //enable HotReplacementPlugin webpackConfig.entry.jsx = [webpackConfig.entry.jsx] webpackConfig.entry.jsx.unshift(`webpack-dev-server/client?http://localhost:${CLIENT_PORT}/`, "webpack/hot/dev-server") webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()) - const devServer= new WebpackDevServer(webpack(webpackConfig), { - contentBase: __dirname + '/../client', //seems doesn't effect + contentBase: __dirname + '/../client', hot: true, historyApiFallback: true, - - //proxy the server port, so that easy to avoid cross-domain while requesting the APIs + //proxy the server port, easy to avoid cross-domain while requesting the APIs proxy: { - "/api/*": `http://localhost:${SERVER_PORT}` + "/api/*": `http://localhost:${SERVER_PORT}`, + // "*": `http://localhost:${SERVER_PORT}` }, - - // webpack-dev-middleware options stats: { colors: true }, }).listen(CLIENT_PORT) - } else{ + // enable history-api-fallback app.use(history()) app.use(express.static(__dirname + '/../static')) } -app.get('/test', function (req, res) { - res.send('Hello World!') -}); app.get('/api/test', function (req, res) { - res.send('Hello World!') + res.send('The APIs works!') }); app.listen(SERVER_PORT, function () { - console.log(`Example app listening on port ${SERVER_PORT}!`) + console.log(`API Server listening on port ${SERVER_PORT}!`) }); \ No newline at end of file