🔧 Adds option to enable SRI integrity, plus refactos PWA into defaults

.env

@@ -16,6 +16,9 @@
 # Usually the same as BASE_URL, but accessible in frontend
 # VUE_APP_DOMAIN=https://dashy.to
 
+# Should enable SRI for build script and link resources
+# INTEGRITY=true
+
 # Computed automatically on build. Indicates if running in container
 # IS_DOCKER=true
 

src/utils/defaults.js

@@ -200,4 +200,19 @@ module.exports = {
     guestAccess: 2,
     notLoggedIn: 3,
   },
+  /* Progressive Web App settings, used by Vue Config */
+  pwa: {
+    name: 'Dashy',
+    manifestPath: './manifest.json',
+    themeColor: '#00af87',
+    msTileColor: '#0b1021',
+    mode: 'production',
+    iconPaths: {
+      manifestCrossorigin: 'use-credentials',
+      favicon64: './web-icons/favicon-64x64.png',
+      favicon32: './web-icons/favicon-32x32.png',
+      maskIcon: './web-icons/dashy-logo.png',
+      msTileImage: './web-icons/dashy-logo.png',
+    },
+  },
 };

vue.config.js

@@ -7,14 +7,21 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 // Get current version
 process.env.VUE_APP_VERSION = require('./package.json').version;
 
-// Specify and export the main Vue app config
+// Get default info for PWA
-module.exports = {
+const { pwa } = require('./src/utils/defaults');
-  publicPath: process.env.BASE_URL,
+
-  integrity: true,
+// Get base URL
-  chainWebpack: config => {
+const publicPath = process.env.BASE_URL || '/';
-    config.module.rules.delete('svg');
+
-  },
+// Should enable Subresource Integrity (SRI) on link and script tags
-  configureWebpack: {
+const integrity = process.env.INTEGRITY === 'true';
+
+// Format for progress bar, shown while app building
+const progressFormat = '\x1b[1m\x1b[36mBuilding Dashy\x1b[0m '
+  + '[\x1b[1m\x1b[32m:bar\x1b[0m] :percent (:elapsed seconds)';
+
+// Webpack Config
+const configureWebpack = {
   performance: { hints: false },
   module: {
     rules: [
@@ -22,30 +29,26 @@ module.exports = {
     ],
   },
   plugins: [
-      // Display progress bar while building
+    new ProgressBarPlugin({ format: progressFormat }),
-      new ProgressBarPlugin(),
   ],
-  },
+};
-  // Specify resources for PWA / mobile support
+
-  pwa: {
+// Application pages
-    name: 'Dashy',
+const pages = {
-    manifestPath: './manifest.json',
-    themeColor: '#00af87',
-    msTileColor: '#0b1021',
-    mode: 'production',
-    iconPaths: {
-      manifestCrossorigin: 'use-credentials',
-      favicon64: './web-icons/favicon-64x64.png',
-      favicon32: './web-icons/favicon-32x32.png',
-      maskIcon: './web-icons/dashy-logo.png',
-      msTileImage: './web-icons/dashy-logo.png',
-    },
-  },
-  // Specify page for app entry point
-  pages: {
   dashy: {
     entry: 'src/main.js',
     filename: 'index.html',
   },
+};
+
+// Export the main Vue app config
+module.exports = {
+  publicPath,
+  pwa,
+  integrity,
+  configureWebpack,
+  pages,
+  chainWebpack: config => {
+    config.module.rules.delete('svg');
   },
 };