From 399c58b5b4d36aefc0caa4bcc3e676e7fd85729b Mon Sep 17 00:00:00 2001 From: Taylor Lehman Date: Fri, 16 Jun 2017 03:20:21 -0700 Subject: [PATCH] run dev and build work --- client/vcustomers/index.ejs | 26 ++++++++ client/vcustomers/index.html | 5 +- client/vcustomers/src/main.js | 12 ++++ package.json | 6 +- server/middleware.js | 75 ++++++++++++++++++++-- server/routes.js | 20 +++--- webpack.config.js | 48 +++++++------- webpack.dev.config.js | 115 ++++++++++++++++++++++++++++++++++ 8 files changed, 263 insertions(+), 44 deletions(-) create mode 100644 client/vcustomers/index.ejs create mode 100644 webpack.dev.config.js diff --git a/client/vcustomers/index.ejs b/client/vcustomers/index.ejs new file mode 100644 index 0000000..9f5bffd --- /dev/null +++ b/client/vcustomers/index.ejs @@ -0,0 +1,26 @@ + + + + + + manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> + + + <%= htmlWebpackPlugin.options.title || 'Gillibus-Admin' %> + + + + <% for (var css in htmlWebpackPlugin.files.css) { %> + + <% } %> + + + +
+ +<% for (var chunk in htmlWebpackPlugin.files.chunks) { %> + +<% } %> + + + diff --git a/client/vcustomers/index.html b/client/vcustomers/index.html index 16d7cf6..0c08388 100644 --- a/client/vcustomers/index.html +++ b/client/vcustomers/index.html @@ -5,13 +5,12 @@ Gillibus - - + +
- diff --git a/client/vcustomers/src/main.js b/client/vcustomers/src/main.js index f23f698..f014914 100644 --- a/client/vcustomers/src/main.js +++ b/client/vcustomers/src/main.js @@ -23,3 +23,15 @@ new Vue({ store, render: h => h(App) }); + +// +// console.log('PROCESS = ', process); +// if(process.env.NODE_ENV) { +// console.log('node env ', process.env.NODE_ENV) +// } +// let hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true'); +// hotClient.subscribe(function (event) { +// if (event.action === 'reload') { +// window.location.reload(true) +// } +// }); diff --git a/package.json b/package.json index fc5a98f..50d05ff 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "watch": "webpack-dev-server --hot --inline --config webpack.config.js --content-base client", "dev-proxy": "webpack-dev-server --hot --inline --config webpack-proxy-server.config.js --content-base client", "build:prod": "NODE_ENV='production' webpack --colors", - "build:dev": "NODE_ENV='DEVELOPMENT' webpack --colors" + "build:dev": "NODE_ENV='DEVELOPMENT' webpack --colors", + "build": "webpack --watch" }, "repository": { "type": "git", @@ -96,7 +97,8 @@ "vue-template-compiler": "^2.3.4", "vue2-google-maps": "^0.7.5", "vuex": "^2.3.1", - "webpack": "^2.2.1" + "webpack": "^2.2.1", + "connect-history-api-fallback": "latest" }, "devDependencies": { "friendly-errors-webpack-plugin": "^1.6.1", diff --git a/server/middleware.js b/server/middleware.js index 8d74dd1..1ea1798 100644 --- a/server/middleware.js +++ b/server/middleware.js @@ -12,6 +12,15 @@ const morgan = require('morgan'); const cookieParser = require('cookie-parser'); const flash = require('connect-flash'); +const webpack = require('webpack'); +const webpackConfig = require('../webpack.dev.config'); +const compiler = webpack(webpackConfig); + +const PRODUCTION = process.env.NODE_ENV === 'production'; +const autoOpenBrowser = true; +const opn = require('opn'); + + module.exports = function(app, express) { let calendarRouter = express.Router(); let bookingRouter = express.Router(); @@ -19,11 +28,69 @@ module.exports = function(app, express) { // SETUP app.set('PRIVATE_KEY', auth.serializeKey(process.env.PRIVATE_KEY)); - app.use(sslRedirect()); + // app.use(sslRedirect()); app.use(morgan('dev')); - app.use(express.static(__dirname + '/../client/vcustomers/dist')); // TODO - THIS IS STATIC VUE-CUSTOMER - app.use(express.static(__dirname + '/../client/vue-admin/dist')); - app.use(express.static(__dirname + '/sockjs-node')); + + if(!PRODUCTION) { + + + let devMiddleware = require('webpack-dev-middleware')(compiler, { + reload: true, + noInfo: true, + publicPath: webpackConfig.output.publicPath, + stats: { + colors: true, + chunks: false, // this reduces the amount of stuff I see in my terminal; configure to your needs + 'errors-only': true + } + }) + + let hotMiddleware = require('webpack-hot-middleware')(compiler, { + reload: true + }); + + compiler.plugin('compilation', function (compilation) { + compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { + hotMiddleware.publish({ action: 'reload' }) + cb() + }) + }) + + app.use(require('connect-history-api-fallback')()); + + app.use(devMiddleware); + app.use(hotMiddleware); + + let _resolve + let readyPromise = new Promise(resolve => { + _resolve = resolve + }) + + let uri = 'http://localhost:3000'; + + + devMiddleware.waitUntilValid(() => { + console.log('> Listening at ' + process.env.PORT || 3000 + '\n') + // when env is testing, don't need open it + if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { + opn(uri) + } + _resolve() + }) + + + } else { + + console.log('SERVING STATIC FOR PROD -----> \n\n'); + app.use(express.static(__dirname + '/../client/vcustomers/dist')); // TODO - THIS IS STATIC VUE-CUSTOMER + app.use(express.static(__dirname + '/../client/vue-admin/dist')); + app.use(express.static(__dirname + '/sockjs-node')); + } + + + + + app.use(bodyParser.json()); app.use(cookieParser()); app.use(bodyParser.urlencoded({extended: false})); diff --git a/server/routes.js b/server/routes.js index c1c98ef..ac9b34f 100644 --- a/server/routes.js +++ b/server/routes.js @@ -29,18 +29,18 @@ module.exports = function(app) { // TODO - VUE CUSTOMER PORTAL - app.get('/', (req, res, next) => { + app.get('*', (req, res, next) => { res.sendFile(path.resolve(__dirname, '../client/vcustomers/dist/index.html')) }); - app.get(/^\/(?!portal|static|api).*/, (req, res, next) => { - res.sendFile(path.resolve(__dirname, '../client/vcustomers/dist/index.html')) - }); - - - app.get(['/portal*'],auth.tokenCheck, (req, res, next) => { - res.clearCookie('X-Access-Token'); - res.sendFile(path.resolve(__dirname, '../client/vue-admin/dist/index.html')); - }) + // app.get(/^\/(?!portal|static|api).*/, (req, res, next) => { + // res.sendFile(path.resolve(__dirname, '../client/vcustomers/dist/index.html')) + // }); + // + // + // app.get(['/portal*'],auth.tokenCheck, (req, res, next) => { + // res.clearCookie('X-Access-Token'); + // res.sendFile(path.resolve(__dirname, '../client/vue-admin/dist/index.html')); + // }) }; diff --git a/webpack.config.js b/webpack.config.js index 93ccb69..183b0ed 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,12 +15,12 @@ const VCustomersMainStyles = new ExtractTextPlugin('[name]/dist/static/css/main. // const TEST = new ExtractTextPlugin('[name]/dist/static/css/main.css'); // const CustomerLocalStyles = new ExtractTextPlugin('vcustomers/dist/static/css/main.css'); -const CustomerVendorStyles = new ExtractTextPlugin('vcustomers/dist/static/css/vendor.css'); +const CustomerVendorStyles = new ExtractTextPlugin('static/css/vendor.css'); // const AdminLocalStyles = new ExtractTextPlugin('[name]/dist/static/css/main.css'); -const AdminVendorStyles = new ExtractTextPlugin('vue-admin/dist/static/css/vendor.css'); +// const AdminVendorStyles = new ExtractTextPlugin('vue-admin/dist/static/css/vendor.css'); const AllLocalStyles = new ExtractTextPlugin({ - filename: '[name]/dist/static/css/main.css', + filename: 'static/css/main.css', allChunks: true }); @@ -32,16 +32,15 @@ shell.rm('-rf', customerBuildDir, adminBuildDir, vcustomerBuildDir, testingDir); let config = { - context: path.resolve(__dirname, "client"), - entry: { - // customers: './customers/src/app.js', - vcustomers: './vcustomers/src/main.js', - "vue-admin": './vue-admin/src/main.js' - }, + context: path.resolve(__dirname, 'client', 'vcustomers'), + entry: './src/main.js', + output: { - path: path.resolve(__dirname, 'client'), - filename: '[name]/dist/static/js/[name].js' + path: path.resolve(__dirname, 'client', 'vcustomers', 'dist'), + filename: 'bundle.js', + publicPath: '/' }, + module: { rules: [ { @@ -64,8 +63,8 @@ let config = { include: [path.resolve(__dirname, 'client/vcustomers')], loader: 'file-loader', query: { - name: '/static/images/[hash].[ext]', - outputPath: '/vcustomers/dist' + name: 'static/images/[hash].[ext]', + // outputPath: '/vcustomers/dist' } }, @@ -220,8 +219,8 @@ let config = { test: /\.(woff|woff2|eot|ttf|svg|otf)$/, loader: 'file-loader', query: { - name:'/static/fonts/[name].[ext]', - outputPath: '/vcustomers/dist' + name:'static/fonts/[name].[ext]', + // outputPath: '/vcustomers/dist' } }, @@ -295,7 +294,6 @@ let config = { // VCustomersMainStyles, //TODO - put this back! CustomerVendorStyles, // CustomerLocalStyles, - AdminVendorStyles, AllLocalStyles, // AdminLocalStyles, // TEST, @@ -323,17 +321,17 @@ let config = { // inject: false, // chunks: ['customers'] // }), + // new HtmlWebpackPlugin({ + // filename: 'vue-admin/dist/index.html', + // template: path.resolve(__dirname, 'client/vue-admin/index.ejs'), + // inject: false, + // chunks: ['vue-admin'] + // }), new HtmlWebpackPlugin({ - filename: 'vue-admin/dist/index.html', - template: path.resolve(__dirname, 'client/vue-admin/index.ejs'), - inject: false, - chunks: ['vue-admin'] - }), - new HtmlWebpackPlugin({ - filename: 'vcustomers/dist/index.html', + filename: 'index.html', template: path.resolve(__dirname, 'client/vcustomers/index.html'), - inject: false, - chunks: ['vcustomers'] + inject: true, + // chunks: ['vcustomers'] }) ], devtool: 'source-map' diff --git a/webpack.dev.config.js b/webpack.dev.config.js new file mode 100644 index 0000000..8b985f5 --- /dev/null +++ b/webpack.dev.config.js @@ -0,0 +1,115 @@ +const path = require('path'), + webpack = require('webpack'), + ExtractTextPlugin = require('extract-text-webpack-plugin'), + HtmlWebpackPlugin = require('html-webpack-plugin'); + +const CustomerVendorStyles = new ExtractTextPlugin('static/css/vendor.css'); +const AllLocalStyles = new ExtractTextPlugin({ + filename: 'static/css/main.css', + allChunks: true +}); + +const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'; + + +let config = { + context: path.resolve(__dirname, 'client', 'vcustomers'), + entry: [ './src/main.js', hotMiddlewareScript], + + output: { + path: path.resolve(__dirname, 'client', 'vcustomers', 'dist'), + filename: 'bundle.js', + publicPath: '/' + }, + + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + extractCSS: true + } + }, + { + test: /\.js$/, + exclude: [path.resolve(__dirname, 'node_modules'), __dirname + 'customers/dist'], + loader: 'babel-loader', + query: { + presets: ['es2015', 'stage-2'] + } + }, + { + test: /\.(png|jpg)$/, + include: [path.resolve(__dirname, 'client/vcustomers')], + loader: 'file-loader', + query: { + name: 'static/images/[hash].[ext]' + // outputPath: '/static/images/' + // publicPath: 'static/images/' + } + }, + { + test: /\.less$/, + include: [ + path.resolve(__dirname, 'client/vcustomers/src'), + path.resolve(__dirname, 'client/vue-admin/src') + ], + exclude: [ + path.resolve(__dirname, 'node_modules') + ], + use: AllLocalStyles.extract({ + fallback: "style-loader", + use: "css-loader!less-loader" + }) + }, + { + test: /\.css$/, + include: [ + path.resolve(__dirname, 'node_modules') + ], + // exclude: [ + // path.resolve(__dirname, 'client/vue-admin/src') + // ], + use: CustomerVendorStyles.extract({ + fallback: "style-loader", + use: ["css-loader"] + }) + }, + { + test: /\.(woff|woff2|eot|ttf|svg|otf)$/, + loader: 'file-loader', + query: { + name:'static/fonts/[name].[ext]' + // outputPath: '/vcustomers/dist' + } + }, + ] + + }, + + resolve: { + extensions: ['.js'], + alias: { + VLess: path.resolve(__dirname, 'client', 'vcustomers', 'src', 'less') + } + }, + + plugins: [ + CustomerVendorStyles, + AllLocalStyles, + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + + new HtmlWebpackPlugin({ + filename: 'index.html', + template: path.resolve(__dirname, 'client/vcustomers/index.ejs'), + inject: false, + develop: true, + title: 'Gillibus' + }) + ] +}; + + +module.exports = config;