init

platform/app/.webpack/webpack.pwa.js

@@ -0,0 +1,210 @@
+// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
+// ~~ WebPack
+const path = require('path');
+const { merge } = require('webpack-merge');
+const webpack = require('webpack');
+const webpackBase = require('./../../../.webpack/webpack.base.js');
+// ~~ Plugins
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// ~~ Directories
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+// ~~ Env Vars
+const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'index.html';
+const PUBLIC_URL = process.env.PUBLIC_URL || '/';
+const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
+
+// proxy settings
+const PROXY_TARGET = process.env.PROXY_TARGET;
+const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
+const PROXY_PATH_REWRITE_FROM = process.env.PROXY_PATH_REWRITE_FROM;
+const PROXY_PATH_REWRITE_TO = process.env.PROXY_PATH_REWRITE_TO;
+
+const OHIF_PORT = Number(process.env.OHIF_PORT || 3000);
+const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
+const Dotenv = require('dotenv-webpack');
+const writePluginImportFile = require('./writePluginImportsFile.js');
+// const MillionLint = require('@million/lint');
+
+const copyPluginFromExtensions = writePluginImportFile(SRC_DIR, DIST_DIR);
+
+const setHeaders = (res, path) => {
+  if (path.indexOf('.gz') !== -1) {
+    res.setHeader('Content-Encoding', 'gzip');
+  } else if (path.indexOf('.br') !== -1) {
+    res.setHeader('Content-Encoding', 'br');
+  }
+  if (path.indexOf('.pdf') !== -1) {
+    res.setHeader('Content-Type', 'application/pdf');
+  } else if (path.indexOf('mp4') !== -1) {
+    res.setHeader('Content-Type', 'video/mp4');
+  } else if (path.indexOf('frames') !== -1) {
+    res.setHeader('Content-Type', 'multipart/related');
+  } else {
+    res.setHeader('Content-Type', 'application/json');
+  }
+};
+
+module.exports = (env, argv) => {
+  const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
+  const isProdBuild = process.env.NODE_ENV === 'production';
+  const hasProxy = PROXY_TARGET && PROXY_DOMAIN;
+
+  const mergedConfig = merge(baseConfig, {
+    entry: {
+      app: ENTRY_TARGET,
+    },
+    output: {
+      path: DIST_DIR,
+      filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
+      publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
+      devtoolModuleFilenameTemplate: function (info) {
+        if (isProdBuild) {
+          return `webpack:///${info.resourcePath}`;
+        } else {
+          return 'file:///' + encodeURI(info.absoluteResourcePath);
+        }
+      },
+    },
+    resolve: {
+      modules: [
+        // Modules specific to this package
+        path.resolve(__dirname, '../node_modules'),
+        // Hoisted Yarn Workspace Modules
+        path.resolve(__dirname, '../../../node_modules'),
+        SRC_DIR,
+      ],
+    },
+    plugins: [
+      // For debugging re-renders
+      // MillionLint.webpack(),
+      new Dotenv(),
+      // Clean output.path
+      new CleanWebpackPlugin(),
+      // Copy "Public" Folder to Dist
+      new CopyWebpackPlugin({
+        patterns: [
+          ...copyPluginFromExtensions,
+          {
+            from: PUBLIC_DIR,
+            to: DIST_DIR,
+            toType: 'dir',
+            globOptions: {
+              // Ignore our HtmlWebpackPlugin template file
+              // Ignore our configuration files
+              ignore: ['**/config/**', '**/html-templates/**', '.DS_Store'],
+            },
+          },
+          // Short term solution to make sure GCloud config is available in output
+          // for our docker implementation
+          {
+            from: `${PUBLIC_DIR}/config/google.js`,
+            to: `${DIST_DIR}/google.js`,
+          },
+          // Copy over and rename our target app config file
+          {
+            from: `${PUBLIC_DIR}/${APP_CONFIG}`,
+            to: `${DIST_DIR}/app-config.js`,
+          },
+          // Copy Dicom Microscopy Viewer build files
+          {
+            from: '../../../node_modules/dicom-microscopy-viewer/dist/dynamic-import',
+            to: DIST_DIR,
+            globOptions: {
+              ignore: ['**/*.min.js.map'],
+            },
+          },
+        ],
+      }),
+      // Generate "index.html" w/ correct includes/imports
+      new HtmlWebpackPlugin({
+        template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
+        filename: 'index.html',
+        templateParameters: {
+          PUBLIC_URL: PUBLIC_URL,
+        },
+      }),
+      // Generate a service worker for fast local loads
+      new InjectManifest({
+        swDest: 'sw.js',
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
+        // Increase the limit to 4mb:
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+        // Need to exclude the theme as it is updated independently
+        exclude: [/theme/],
+        // Cache large files for the manifests to avoid warning messages
+        maximumFileSizeToCacheInBytes: 1024 * 1024 * 50,
+      }),
+    ],
+    // https://webpack.js.org/configuration/dev-server/
+    devServer: {
+      // gzip compression of everything served
+      // Causes Cypress: `wait-on` issue in CI
+      // compress: true,
+      // http2: true,
+      // https: true,
+      open: true,
+      port: OHIF_PORT,
+      client: {
+        overlay: { errors: true, warnings: false },
+      },
+      proxy: {
+        '/dicomweb': 'http://localhost:5000',
+      },
+      static: [
+        {
+          directory: '../../testdata',
+          staticOptions: {
+            extensions: ['gz', 'br', 'mht'],
+            index: ['index.json.gz', 'index.mht.gz'],
+            redirect: true,
+            setHeaders,
+          },
+          publicPath: '/viewer-testdata',
+        },
+      ],
+      //public: 'http://localhost:' + 3000,
+      //writeToDisk: true,
+      historyApiFallback: {
+        disableDotRule: true,
+        index: PUBLIC_URL + 'index.html',
+      },
+      headers: {
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Opener-Policy': 'same-origin',
+      },
+      devMiddleware: {
+        writeToDisk: true,
+      },
+    },
+  });
+
+  if (hasProxy) {
+    mergedConfig.devServer.proxy = mergedConfig.devServer.proxy || {};
+    mergedConfig.devServer.proxy = {
+      [PROXY_TARGET]: {
+        target: PROXY_DOMAIN,
+        changeOrigin: true,
+        pathRewrite: {
+          [`^${PROXY_PATH_REWRITE_FROM}`]: PROXY_PATH_REWRITE_TO,
+        },
+      },
+    };
+  }
+
+  if (isProdBuild) {
+    mergedConfig.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: '[name].bundle.css',
+        chunkFilename: '[id].css',
+      })
+    );
+  }
+
+  return mergedConfig;
+};