webui: Add cache invalidation support

* use webpack hash functionality to generate unique filenames for `b2share-bundle.js` * index.html created from template (html-webpack-plugin) Signed-off-by: Jussi Steenari <[email protected]> Co-authored-by: Harri Hirvonsalo <[email protected]>
EUDAT-B2SHARE · Feb 22, 2021 · f62bf56 · f62bf56
1 parent d846068
commit f62bf56
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 6 deletions.
diff --git a/webui/app/index.html b/webui/app/index.html
@@ -29,7 +29,7 @@
     <noscript>
     <div>B2SHARE requires JavaScript to be enabled!</div>
     </noscript>
-
+    
     <div id="main-container">
         <div class="page-wrap">
             <div id="body">
@@ -93,7 +93,7 @@
             </div>
         </div>
     </div>
-
-    <script src="/b2share-bundle.js"></script>
+    <script type="text/javascript" src=js/b2share-bundle.2070b6ce0eb2745e78b1.js></script>
+
 </body>
 </html>
diff --git a/webui/package.json b/webui/package.json
@@ -36,10 +36,12 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "clean-webpack-plugin": "^1.0.1",
     "dotenv-webpack": "^1.5.7",
     "fast-json-patch": "^0.5.6",
     "font-awesome": "^4.4.0",
     "history": "^3.3.0",
+    "html-webpack-plugin": "^2.30.1",
     "immutable": "^3.7.6",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",

diff --git a/webui/templates/index_template.html b/webui/templates/index_template.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>B2SHARE</title>
+
+    <link rel="shortcut icon" href="/favicon.ico"/>
+
+    <!-- new header -->
+    <link rel="stylesheet" href="/lib/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/lib/css/toggle-style.css">
+    <link rel="stylesheet" href="/lib/css/react-widgets.css">
+    <link rel="stylesheet" href="/css/bootstrap-theme.css">
+
+    <link rel="stylesheet" href="/css/font.css">
+    <link rel="stylesheet" href="/css/app.css">
+
+    <!--[if lt IE 9]>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
+    <![endif]-->
+
+</head>
+
+<body>
+    <noscript>
+    <div>B2SHARE requires JavaScript to be enabled!</div>
+    </noscript>
+
+    <div id="main-container">
+        <div class="page-wrap">
+            <div id="body">
+                <div class="primary-header">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="section-link">
+                                    <a href="https://eudat.eu">Go to EUDAT website</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="page"></div>
+            </div>
+
+            <div id="footer">
+                <div class="footer">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div class="col-md-4 align-self-center">
+                                <div class="logo">
+                                    <a href="https://eudat.eu"><img src="/img/logo_eudat_cdi.svg" alt="EUDAT CDI logo" style="max-width: 200px"></a>
+                                    <p>© 2020 EUDAT Collaborative Data Infrastructure </p>
+                                </div>
+                            </div>
+                            <div class="col-md-8">
+                                <div id="menu">
+                                    <ul>
+                                        <li><a href="https://hdl.handle.net/11304/e43b2e3f-83c5-4e3f-b8b7-18d38d37a6cd">EUDAT Service ToU</a></li>
+                                        <li><a href="https://hdl.handle.net/11304/e43b2e3f-83c5-4e3f-b8b7-18d38d37a6cd">Terms of Use</a></li>
+                                        <li><a href="https://eudat.eu/privacy-policy-summary">Data Privacy Statement</a></li>
+                                        <li><a href="https://eudat.eu/what-eudat">About EUDAT</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="secondary-footer">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div class="col-md-8">
+                                <div class="images">
+                                    <img src="/img/eu.jpg" alt="EU">
+                                    <img src="/img/eosc-hub-g.png" alt="EOSC-HUB" style="max-width: 150px">
+                                </div>
+                                <p>
+                                    B2SHARE is co-funded by the EOSC-hub project (Horizon 2020) under Grant number 777536
+                                </p>
+                            </div>
+                            <div class="col-md-4 align-self-center">
+                                <div class="pull-right">
+                                    <p>B2SHARE v.<span id="version"></span><br/>Powered by &nbsp;<img src="/img/invenio.png"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src=<%= htmlWebpackPlugin.files.js %>></script>
+
+</body>
+</html>
diff --git a/webui/webpack.config.devel.js b/webui/webpack.config.devel.js
@@ -2,21 +2,39 @@ var path = require('path');
 var webpack = require('webpack');
 const Dotenv = require('dotenv-webpack');
 var WatchTimePlugin = require('webpack-watch-time-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 console.log("Using configuration file from", __dirname+'/../webui.cfg');
 
+let cleanOptions = {
+  root: __dirname+'/app',
+  verbose: true,
+  dry: false
+}
+
+
 module.exports = {
     entry: ['./src/main.jsx'],
     devtool: 'cheap-module-eval-source-map',
-    output: { path: __dirname+"/app", filename: 'b2share-bundle.js' },
+    output: { path: __dirname+"/app/", filename: 'js/b2share-bundle.[hash].js'},
     plugins: [
         // Note: Only values used in source code will be included in the bundle.
         // See dotenv-webpack documentation for more details.
         new Dotenv({
             path: __dirname+'/../webui.cfg', // load this file instead of '.env'.
             systemvars: true, // load environment variables from 'process.env'.
         }),
-        WatchTimePlugin
+        WatchTimePlugin,
+        new CleanWebpackPlugin('js', cleanOptions),
+        //inject false prevents script tag from being automatically injected
+        //the script tag is injected directly in index_template.html code instead
+        new HtmlWebpackPlugin({
+            inject: false,
+            hash: false,
+            template: 'templates/index_template.html',
+            filename: 'index.html'
+        }),
     ],
     module: {
         loaders: [

diff --git a/webui/webpack.config.js b/webui/webpack.config.js
@@ -1,13 +1,23 @@
 var path = require('path');
 var webpack = require('webpack');
 const Dotenv = require('dotenv-webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 console.log("Using configuration file from", __dirname+'/../webui.cfg');
 
+let cleanOptions = {
+  root: __dirname+'/app',
+  verbose: true,
+  dry: false
+}
+
+
+
 module.exports = {
     entry: ['./src/main.jsx'],
     devtool: 'source-map',
-    output: { path: __dirname+"/app", filename: 'b2share-bundle.js' },
+    output: { path: __dirname+"/app/", filename: 'js/b2share-bundle.[hash].js'},
     plugins: [
         new webpack.DefinePlugin({
             'process.env': {
@@ -22,6 +32,17 @@ module.exports = {
         }),
         new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/), // trim down moment.js
         new webpack.optimize.OccurenceOrderPlugin(),
+
+        new CleanWebpackPlugin('js', cleanOptions),
+
+        //inject false prevents script tag from being automatically injected
+        //the script tag is injected directly in index_template.html code instead
+        new HtmlWebpackPlugin({
+            inject: false,
+            hash: false,
+            template: 'templates/index_template.html',
+            filename: 'index.html'
+        }),
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin({
             compressor: {