Merge pull request #158 from ReCodEx/better-bundle-loading

Fixing build process, caching, and bundle loading.

bin/dev.js

@@ -2,7 +2,7 @@ import Express from 'express';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import path from 'path';
-import config from '../config/webpack.config';
+import config from '../config/webpack.config-dev';
 import colors from 'colors';
 import remotedev from 'remotedev-server';
 

config/webpack.config-dev.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const GitRevisionPlugin = require('git-revision-webpack-plugin');
+
+// load variables from .env
+require('dotenv').config();
+
+// fix Widnows 10 Ubuntu issues with less loader:
+try {
+  require('os').networkInterfaces();
+} catch (e) {
+  require('os').networkInterfaces = () => ({});
+}
+
+const extractCss = new ExtractTextPlugin('style.css');
+const gitRevisionPlugin = new GitRevisionPlugin({
+  versionCommand: 'describe --always --tags'
+});
+
+module.exports = {
+  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'none',
+  entry: path.join(__dirname, '..', 'src/client.js'),
+  output: {
+    filename: 'bundle.js',
+    path: path.join(__dirname, '..', 'public'),
+    publicPath: '/public/'
+  },
+  resolve: {
+    alias: {
+      moment: 'moment/moment.js'
+    }
+  },
+  module: {
+    loaders: [
+      { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] },
+      { test: /\.json$/, loader: 'json-loader' },
+      {
+        test: /\.css$/,
+        loader: extractCss.extract(['css-loader'])
+      },
+      {
+        test: /\.less$/,
+        loader: extractCss.extract(['css-loader?modules', 'less-loader'])
+      },
+      {
+        test: /\.scss$/,
+        loader: extractCss.extract(['css-loader?modules', 'sass-loader'])
+      },
+      {
+        test: /.*\.(gif|png|jpe?g|svg)$/i,
+        loaders: ['file-loader']
+      }
+    ]
+  },
+  plugins: [
+    extractCss,
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: "'" + process.env.NODE_ENV + "'",
+        API_BASE: "'" + process.env.API_BASE + "'",
+        TITLE: "'" + process.env.TITLE + "'",
+        REDUX_DEV_SERVER_PORT: "'" + process.env.REDUX_DEV_SERVER_PORT + "'",
+        ALLOW_NORMAL_REGISTRATION:
+          "'" + process.env.ALLOW_NORMAL_REGISTRATION + "'",
+        ALLOW_LDAP_REGISTRATION:
+          "'" + process.env.ALLOW_LDAP_REGISTRATION + "'",
+        ALLOW_CAS_REGISTRATION: "'" + process.env.ALLOW_CAS_REGISTRATION + "'",
+        LOGGER_MIDDLEWARE_VERBOSE: "'" + process.env.LOGGER_MIDDLEWARE_VERBOSE + "'",
+        LOGGER_MIDDLEWARE_EXCEPTIONS: "'" + process.env.LOGGER_MIDDLEWARE_EXCEPTIONS + "'",
+      },
+      gitRevision: {
+        VERSION: JSON.stringify(gitRevisionPlugin.version()),
+        COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
+        BRANCH: JSON.stringify(gitRevisionPlugin.branch())
+      }
+    })
+  ]
+};

config/webpack.config.js

@@ -13,7 +13,7 @@ try {
   require('os').networkInterfaces = () => ({});
 }
 
-const extractCss = new ExtractTextPlugin('style.css');
+const extractCss = new ExtractTextPlugin('style-[contenthash].css');
 const gitRevisionPlugin = new GitRevisionPlugin({
   versionCommand: 'describe --always --tags'
 });
@@ -22,7 +22,7 @@ module.exports = {
   devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'none',
   entry: path.join(__dirname, '..', 'src/client.js'),
   output: {
-    filename: 'bundle.js',
+    filename: 'bundle-[hash].js',
     path: path.join(__dirname, '..', 'public'),
     publicPath: '/public/'
   },

package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "scripts": {
-    "clean": "rm -f public/bundle.js && rm -f public/bundle.js.min && rm -f bin/server.js",
+    "clean": "rm -f public/bundle-* && rm -f public/style-* && rm -f bin/server.js",
     "build:server": "webpack -p --config config/webpack.server.js",
     "build:client": "webpack -p --config config/webpack.config.js",
     "build:server:test": "webpack --config config/webpack.server.js",
@@ -47,6 +47,7 @@
     "file-saver": "^1.3.3",
     "flat": "^4.0.0",
     "flow-bin": "^0.46.0",
+    "glob": "^7.1.2",
     "global": "^4.3.1",
     "immutable": "^3.8.1",
     "isomorphic-fetch": "^2.2.1",

src/server.js

@@ -41,11 +41,29 @@ if (typeof atob === 'undefined') {
  * some basic middleware for tempaltes and static file serving.
  */
 
-const bundle = process.env.BUNDLE || '/bundle.js';
+function getFileName(pattern, addPrefix = '') {
+  const glob = require('glob');
+  const files = glob.sync(pattern);
+  if (!files || files.length < 1) {
+    return null;
+  }
+  const fileName = files[0].substr(files[0].lastIndexOf('/') + 1);
+  return fileName ? addPrefix + fileName : null;
+}
+
+const bundle =
+  process.env.BUNDLE || getFileName('public/bundle-*.js', '/') || '/bundle.js';
+const style = getFileName('public/style-*.css', '/') || '/style.css';
 
 let app = new Express();
 app.set('view engine', 'ejs');
-app.use(Express.static('public'));
+app.use(
+  Express.static('public', {
+    immutable: true,
+    maxAge: '30d',
+    lastModified: true
+  })
+);
 app.use(cookieParser());
 
 const renderWithoutSSR = (res, renderProps) => {
@@ -55,7 +73,7 @@ const renderWithoutSSR = (res, renderProps) => {
     head,
     reduxState: 'undefined',
     bundle,
-    style: '/style.css'
+    style
   });
 };
 
@@ -73,7 +91,7 @@ const renderPage = (res, store, renderProps) => {
     head,
     reduxState,
     bundle,
-    style: '/style.css'
+    style
   });
 };
 

views/index.ejs

@@ -8,23 +8,69 @@
       <%- head.link.toString() %>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/png" href="/public/favicon.ico" />
+        <style type="text/css">
+          @font-face {
+            font-family: termcyr;
+            src: url("/public/term_cyr.ttf");
+            font-display: block;
+          }
+
+          #loading-screen {
+            font-family: termcyr, Verdana, Geneva, Tahoma, sans-serif;
+            font-size: 24pt;
+            font-variant: small-caps;
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            text-align: center;
+            line-height: 100vh;
+            z-index: 100;
+            opacity: 0.95;
+            overflow: hidden;
+            background-color: #f4fff4;
+          }
+
+          body.loading {
+            position: fixed;
+            overflow: hidden!important;
+          }
+
+          body.loading * {
+            z-index: 0;
+            overflow: hidden!important;
+          }
+
+        </style>
 
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
           crossorigin="anonymous">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="<%= style %>">
 </head>
 
-<body class="skin-green fixed">
+<body class="loading">
+  <div id="loading-screen">Loading...</div>
+
   <div id="root">
     <%- html %>
   </div>
   <% if (reduxState) { %>
     <script>
       window.__INITIAL_STATE__ = <%- reduxState %>;
+
     </script>
-  <% } %>
-    <script src="<%= bundle %>"></script>
+    <% } %>
+
+      <script src="<%= bundle %>"></script>
+
+      <script>
+        document.getElementById('loading-screen').remove();
+        document.body.className = "skin-green fixed";
+
+      </script>
+
 </body>
 
 </html>

yarn.lock

@@ -3201,7 +3201,7 @@ glob@^5.0.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
   dependencies: