Feature/sails grunt to webpack

.circleci/config.yml

@@ -10,6 +10,7 @@ jobs:
       - run: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
       - run: (chmod +x support/build/compileProductionAngular.sh && support/build/compileProductionAngular.sh)
       - run: (chmod +x support/build/compileProductionAngularLegacy.sh && support/build/compileProductionAngularLegacy.sh)
+      - run: npm run webpack
       - persist_to_workspace:
           root: .
           paths:
@@ -22,6 +23,7 @@ jobs:
       - run: (cd core && npm install && node_modules/.bin/tsc)
       - run: npm install --production
       - run: node_modules/.bin/tsc
+      - run: npm run webpack
       - persist_to_workspace:
           root: .
           paths:

api/hooks/webpack/index.js

@@ -0,0 +1,74 @@
+const webpack = require('webpack');
+const { once } = require('lodash');
+
+/**
+ * webpack hook
+ *
+ * If production, build once, then trigger `done`.
+ * If dev, build once, trigger `done`, then watch for changes to trigger rebuild.
+ *
+ * @description :: A hook definition.  Extends Sails by adding shadow routes, implicit actions, and/or initialization logic.
+ * @docs        :: https://sailsjs.com/docs/concepts/extending-sails/hooks
+ */
+
+module.exports = function defineWebpackHook(sails) {
+
+  if (!sails.config.webpack) {
+    sails.log.warn('sails-hook-webpack: No Webpack options have been defined.');
+    return {};
+  }
+
+  if (!sails.config.webpack.config) {
+    sails.log.warn('sails-hook-webpack: Configure your config/webpack.js file.');
+    return {};
+  }
+
+  if (process.env.NODE_ENV != 'docker') {
+    sails.log.warn(`sails-hook-webpack: Running in non-dev environment, skipping webpack run.`);
+    return {};
+  }
+
+  return {
+
+    /**
+     * Runs when this Sails app loads/lifts.
+     */
+    initialize: async function(done) {
+
+      sails.log.info('Initializing custom hook (`webpack`)');
+      const isSailsScriptEnv = () => global.isSailsScriptEnv;
+      if (isSailsScriptEnv()) void done();
+
+      const compiler = webpack(sails.config.webpack.config);
+
+
+      // on first compilation (due to either run or watch) if it fails,
+      // it should throw, else it should call `done`
+      const triggerDoneOnce = once((err, stats) => {
+        if (err || stats.hasErrors()) {
+          sails.log.error(err);
+          sails.log.error(stats);
+          throw new Error(`sails-hook-webpack failed`);
+        } else {
+          done();
+        }
+      });
+
+      const compileCallback = (...args) => {
+        logCompileInfo(...args);
+        triggerDoneOnce(...args);
+      };
+
+      compiler.run(compileCallback);
+    }
+
+  };
+
+};
+
+function logCompileInfo(err, stats) {
+  if (err) {
+    sails.log.error('sails-hook-webpack: Build error: \n\n', err);
+  }
+  sails.log[stats.hasErrors() ? 'error' : 'info'](`sails-hook-webpack:\n${stats.toString({ colors: true, chunks: true })}`);
+}

assets/styles/default-theme.scss

@@ -1,4 +1,5 @@
-@import "../../node_modules/font-awesome-sass/assets/stylesheets/_font-awesome";
+$fa-font-path: "../../node_modules/font-awesome-sass/assets/fonts/font-awesome/";
+@import "~font-awesome-sass/assets/stylesheets/_font-awesome";
 @import "redbox-font";
 
 
@@ -841,8 +842,8 @@ td,th {
 
 @font-face {
     font-family: "Glyphicons Halflings";
-    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
-    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
+    src: url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.eot");
+    src: url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
 }
 
 .glyphicon {

assets/styles/glyphicon.scss

@@ -1,8 +1,8 @@
 
 @font-face {
     font-family: "Glyphicons Halflings";
-    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
-    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
+    src: url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.eot");
+    src: url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("../default/default/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
 }
 
 .glyphicon {

assets/styles/redbox-font.scss

@@ -1,10 +1,10 @@
 @font-face {
     font-family: 'redboxresearchdata';
-    src:  url('../fonts/redbox/redbox.eot?vyxh9f');
-    src:  url('../fonts/redbox/redbox.eot?vyxh9f#iefix') format('embedded-opentype'),
-      url('../fonts/redbox/redbox.ttf?vyxh9f') format('truetype'),
-      url('../fonts/redbox/redbox.woff?vyxh9f') format('woff'),
-      url('../fonts/redbox/redbox.svg?vyxh9f#redboxresearchdata') format('svg');
+    src:  url('../default/default/fonts/redbox/redbox.eot?vyxh9f');
+    src:  url('../default/default/fonts/redbox/redbox.eot?vyxh9f#iefix') format('embedded-opentype'),
+      url('../default/default/fonts/redbox/redbox.ttf?vyxh9f') format('truetype'),
+      url('../default/default/fonts/redbox/redbox.woff?vyxh9f') format('woff'),
+      url('../default/default/fonts/redbox/redbox.svg?vyxh9f#redboxresearchdata') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;

assets/styles/style.scss

@@ -3,7 +3,7 @@
 @import "default-colors";
 @import "default-variables";
 @import "custom-variables";
-@import "../../node_modules/bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
 @import "default-theme";
 @import "custom-theme";
 @import "default-responsive";

config/webpack.js

@@ -0,0 +1,103 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const path = require('path');
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+const cssFilePath = '../default/default/styles/style.min.css';
+module.exports.webpack = {
+  config: [
+    {
+      stats: {
+        loggingDebug: ["sass-loader"],
+      },
+      // webpack no longer runs in production mode, assume non-'docker' values to be production mode
+      mode: process.env.NODE_ENV === 'docker' ? 'development' : 'production',
+      devtool: process.env.NODE_ENV === 'docker' ? 'eval-source-map' : undefined,
+      entry: './assets/styles/style.scss',
+      output: {
+        filename: 'index.bundle.js',
+        path: path.resolve(__dirname, '../.tmp/public/styles'),
+        publicPath: '/'
+      },
+      plugins: [
+        new MiniCssExtractPlugin({
+          // Relative to 'output.path' above!
+          filename: cssFilePath
+        }),
+        new CopyPlugin({
+          patterns: [
+            {
+              // https://www.npmjs.com/package/copy-webpack-plugin#from
+              from: './assets',
+              // Relative to 'output.path' above!
+              to: '../',
+              globOptions: {
+                ignore: ['*js/**/*', '**/*.gitkeep', '**/*.scss', '**/*.less']
+              }
+            },
+            {
+              from: './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
+              to: '../default/default/js/'
+            },
+            {
+              from: './node_modules/jquery/dist/jquery.min.js',
+              to: '../default/default/js/'
+            },
+            {
+              from: './angular-legacy/node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js',
+              to: '../default/default/js/'
+            },
+            {
+              from: './angular-legacy/node_modules/bootstrap-timepicker/js/bootstrap-timepicker.js',
+              to: '../default/default/js/'
+            }
+          ],
+        }),
+      ],
+      module: {
+        rules: [
+          {
+            test: /\.scss$/i,
+            exclude: /\.\.\/angular/,
+            use: [
+              MiniCssExtractPlugin.loader,
+              "css-loader",
+              "sass-loader"
+            ],
+            include: [
+              path.resolve(__dirname, '../assets/styles')
+            ]
+          },
+          {
+            test: /\.(woff2?|ttf|otf|eot|svg)$/,
+            type: 'asset/inline',
+            exclude: /\.\.\/angular/
+          },
+          {
+            test: /\.css$/,
+            exclude: /\.\.\/angular/,
+            use: [MiniCssExtractPlugin.loader, "css-loader"],
+            include: [
+              path.resolve(__dirname, '../.tmp/public/default/default/styles')
+            ]
+          },
+        ]
+      },
+      optimization: {
+        minimizer: [
+          // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
+          // `...`,
+          new CssMinimizerPlugin(),
+        ],
+        minimize: true,
+      }
+    }
+  ],
+  watch:false,
+  watchOptions: {
+    ignored: [
+      "support/**/*",
+      "node_modules/**/*"
+    ]
+  }
+};