Server now works and compiles

private/server/Server.js

@@ -27,9 +27,15 @@ const
   https = require('https'),
   express = require('express'),
   bodyParser = require('body-parser'),
-  fs = require('fs')
+  fs = require('fs'),
+  path = require('path'),
+  webpack = require('webpack'),
+  CompilerOptions = require('./WebpackCompilerOptions')
 ;
 
+//Constants
+const LANDING_FILE = 'index.html';
+
 class Server {
   constructor(app) {
     this.app = app;
@@ -66,6 +72,7 @@ class Server {
         throw new Error("Invalid SSL Cert in Server Configuration");
       }
 
+      //TODO: Clean this up, don't use static files (use path.join etc) and should these be flat files?
       let keyFile = __dirname+'./../'+this.config.ssl.key;
       let certFile = __dirname+'./../'+this.config.ssl.cert;
       if(!fs.existsSync(keyFile)) {
@@ -89,6 +96,10 @@ class Server {
     this.express.use(bodyParser.urlencoded({
       extended: true
     }));
+    this.express.use(express.static('./dist'));
+
+    //Finally our catcher for all other enquiries
+    this.express.get('*', this.onGetRequest.bind(this));
 
     //Create our HTTP and (if needed HTTPS) server(s)
     this.http = http.createServer(this.express);
@@ -104,6 +115,9 @@ class Server {
       }, this.express);
       this.https.on('error', this.onServerError.bind(this));
     }
+
+    //Create our bundler
+    this.compiler = webpack(CompilerOptions(this, this.app));
   }
 
   getConfig() {return this.config;}
@@ -114,6 +128,7 @@ class Server {
   getHTTPSPort() {return this.portHTTPS;}
   getKey() {return this.key;}
   getCertificate() {return this.cert;}
+  getLandingFile() {return path.join(this.app.getPublicDirectory(), LANDING_FILE);}
 
   isRunning() {
     if(typeof this.http !== typeof undefined) {
@@ -140,6 +155,11 @@ class Server {
       port: this.port
     };
 
+    //Create our webpack watcher
+    this.watcher = this.compiler.watch({
+
+    }, this.onWatchChange.bind(this));
+
     //Start the HTTP Server
     this.http.listen(options, this.onServerStart.bind(this));
 
@@ -172,12 +192,18 @@ class Server {
     delete this.http;
     delete this.https;
     delete this.stopPromise;
+    delete this.watcher;
   }
 
   stopPromise(resolve, reject) {
     this.stopResolve = resolve;
     this.stopReject = reject;
 
+    if(typeof this.watcher !== typeof undefined) {
+      this.watcher.close(() => {
+      });
+    }
+
     try {
       this.http.close(this.onHTTPClosed.bind(this));
     } catch(e) {
@@ -201,6 +227,15 @@ class Server {
   onHTTPSClosed() {
     this.resolve();
   }
+
+  onWatchChange(error, stats) {
+    if(error) console.log(error);
+  }
+
+  onGetRequest(req, res) {
+    //Used as our "catch all get requests"
+    res.sendFile(this.getLandingFile());
+  }
 }
 
 module.exports = Server;

private/server/WebpackCompilerOptions.js

@@ -0,0 +1,127 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+//Includes
+const
+  path = require('path'),
+  webpack = require('webpack'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
+  CompressionPlugin = require("compression-webpack-plugin"),
+  UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
+  MiniCssExtractPlugin = require("mini-css-extract-plugin")
+;
+
+//Constants
+const SOURCE_DIRECTORY = './public';
+const ENTRY_FILE = 'index.jsx';
+const ENTRY_WRAPPER = 'index.html';
+
+module.exports = function(server, app) {
+  //Create our dirs
+  let entryDir = path.join(app.getPublicDirectory(), '..', 'public');
+
+  //Create our output
+  let output = {};
+
+  //Set the entry point
+  output.entry = path.join(entryDir, ENTRY_FILE);
+
+  //Set the output
+  output.output = {
+    path: app.getPublicDirectory(),
+    filename: "app.js"
+  }
+
+  //Set Resolves
+  output.resolve = {
+    modules: ['node_modules', SOURCE_DIRECTORY],
+    extensions: ['.js', '.jsx', '.css', '.scss' ]
+  };
+
+  //Setup Modules
+  output.module = {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loaders: ['babel-loader']
+      },
+      {
+        test: /\.scss$|\.css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          'sass-loader',
+        ]
+      },
+
+      {
+        test: /\.jpe?g$|\.gif$|\.png$|\.svg|\.webm|\.mp4$/i,
+        loader: "file-loader?name=[path][name].[ext]"
+      },
+
+      {
+        test: /\.(eot|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
+        loader: 'url-loader'
+      }
+    ]
+  };
+
+  //Setup the Plugins
+  let HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
+    template: path.join(SOURCE_DIRECTORY, ENTRY_WRAPPER),
+    filename: ENTRY_WRAPPER,
+    inject: true
+  });
+
+  let UglifyPluginConfig = new UglifyJsPlugin({
+    test: /\.js($|\?)/i
+  });
+
+  let MiniCssExtractConfig = new MiniCssExtractPlugin({
+    filename: "[name].css",
+    chunkFilename: "[id].css"
+  })
+
+  //Set the plugins
+  output.plugins = [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    MiniCssExtractConfig,
+    HTMLWebpackPluginConfig
+  ];
+
+  //Minimization
+  output.optimization = {
+    minimize: true,
+    minimizer: [
+      UglifyPluginConfig
+    ]
+   };
+
+  //Now setup the production values
+  output.devtool = 'source-map';
+
+  return output;
+}