run dev and build work

taylorleh · Jun 16, 2017 · 399c58b · 399c58b
1 parent b17b198
commit 399c58b
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 44 deletions.
diff --git a/client/vcustomers/index.ejs b/client/vcustomers/index.ejs
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="" <% if(htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <title><%= htmlWebpackPlugin.options.title || 'Gillibus-Admin' %></title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+    <% } %>
+    <script src="https://js.stripe.com/v3/"></script>
+</head>
+<body>
+<div id="app"></div>
+
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+<% } %>
+
+</body>
+</html>
diff --git a/client/vcustomers/index.html b/client/vcustomers/index.html
@@ -5,13 +5,12 @@
   <title>Gillibus</title>
   <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" href="static/css/vendor.css">
-  <link href="static/css/main.css" rel="stylesheet">
+  <!--<link rel="stylesheet" href="static/css/vendor.css">-->
+  <!--<link href="static/css/main.css" rel="stylesheet">-->
   <script src="https://js.stripe.com/v3/"></script>
 </head>
 <body>
 <div id="app"></div>
 <!-- built files will be auto injected -->
-<script src="static/js/vcustomers.js"></script>
 </body>
 </html>
diff --git 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
@@ -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
@@ -12,18 +12,85 @@ 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();
   let authRouter = express.Router();
 
   // 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
@@ -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
@@ -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'