@elliemae/pui-cli 6.16.0 → 7.0.0-alpha.1

package/lib/cli-commands/build.js

@@ -1,20 +1,24 @@
 const { exit } = require('yargs');
+const path = require('path');
 const {
   exec,
   logInfo,
   logError,
   logSuccess,
   writeAppInfo,
+  copyBuildAssetsToVersionedFolder,
 } = require('./utils');
 const { esBuild, TARGETS } = require('../transpile/esbuild');
 
-const { name } = require('../../package.json');
-
 async function buildWebApp() {
   await exec(`rimraf ./build`);
   await exec(
-    `cross-env NODE_ENV=production webpack --config node_modules/${name}/lib/webpack/webpack.prod.babel.js --color`,
+    `cross-env NODE_ENV=production webpack --config ${path.resolve(
+      __dirname,
+      '../webpack/webpack.prod.babel.js',
+    )} --color`,
   );
+  await copyBuildAssetsToVersionedFolder();
   await writeAppInfo();
 }
 

package/lib/cli-commands/start.js

@@ -1,17 +1,22 @@
+const path = require('path');
 const { exit } = require('yargs');
 const { exec, logError, logSuccess } = require('./utils');
 
-const { name } = require('../../package.json');
-
 async function startProdServer() {
   await exec(
-    `cross-env NODE_ENV=production ts-node node_modules/${name}/lib/server --color always`,
+    `cross-env NODE_ENV=production ts-node ${path.resolve(
+      __dirname,
+      '../server',
+    )} --color always`,
   );
 }
 
 async function startDevServer() {
   await exec(
-    `cross-env NODE_ENV=development ts-node node_modules/${name}/lib/server --color always`,
+    `cross-env NODE_ENV=development webpack serve --config ${path.resolve(
+      __dirname,
+      '../webpack/webpack.dev.babel.js',
+    )}`,
   );
 }
 

package/lib/cli-commands/utils.js

@@ -1,9 +1,21 @@
+/* eslint-disable max-lines */
 /* eslint-disable no-console */
 const execa = require('execa');
 const chalk = require('chalk');
 const path = require('path');
-const { readFile, writeFile } = require('fs/promises');
-const { getPaths } = require('../webpack/helpers');
+const {
+  readFile,
+  writeFile,
+  mkdir,
+  readdir,
+  copyFile,
+} = require('fs/promises');
+const {
+  getPaths,
+  isAppLoaderEnabled,
+  getAppVersion,
+  LATEST_VERSION,
+} = require('../webpack/helpers');
 
 const browsersMapping = {
   and_chr: 'Chrome for Android',
@@ -87,3 +99,37 @@ exports.writeAppInfo = async () => {
     path.join(process.cwd(), 'build', 'public', 'info.json'),
   ].forEach(async (infoPath) => writeFile(infoPath, infoJSON));
 };
+
+const copyDir = async (src, dest) => {
+  const entries = await readdir(src, {
+    withFileTypes: true,
+  });
+  await mkdir(dest);
+  return Promise.all(
+    entries.map((entry) => {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      if (entry.isDirectory()) {
+        return copyDir(srcPath, destPath);
+      }
+      return copyFile(srcPath, destPath);
+    }),
+  );
+};
+
+const updateManifestWithVersionInfo = async (dest) => {
+  const manifestFile = path.join(dest, 'manifest.json');
+  let manifestData = await readFile(manifestFile, 'utf8');
+  manifestData = manifestData.replace(/latest\//g, `${getAppVersion()}/`);
+  await writeFile(manifestFile, manifestData);
+};
+
+exports.copyBuildAssetsToVersionedFolder = async () => {
+  const appVersion = getAppVersion();
+  const isVersionedApp = isAppLoaderEnabled() && appVersion !== LATEST_VERSION;
+  if (!isVersionedApp) return;
+  const src = path.resolve(process.cwd(), 'build/public/latest');
+  const dest = path.resolve(process.cwd(), `build/public/${appVersion}`);
+  await copyDir(src, dest);
+  await updateManifestWithVersionInfo(dest);
+};

package/lib/server/csp.js

@@ -17,13 +17,13 @@ const sources = [
 ];
 
 const sendFileWithCSPNonce = ({
-  outputPath,
+  buildPath,
   page = 'index.html',
   nonceRegex = /__CSP_NONCE__/g,
   res,
   fileSystem = fs,
 }) => {
-  fileSystem.readFile(path.resolve(outputPath, page), 'utf8', (err, html) => {
+  fileSystem.readFile(path.resolve(buildPath, page), 'utf8', (err, html) => {
     if (err) {
       res.sendStatus(404);
     } else {

package/lib/server/index.js

@@ -1,26 +1,11 @@
 /* eslint consistent-return:0 import/order:0 */
-
 const express = require('express');
-const cors = require('cors');
-const { resolve } = require('path');
-const expressPinoLogger = require('express-pino-logger');
-const { csp } = require('./csp');
 const logger = require('./logger');
-const argv = require('./argv');
-const port = require('./port');
-const setup = require('./middlewares/frontendMiddleware');
-const { loadRoutes } = require('./util');
-const { getAssetPath } = require('../webpack/helpers');
-
-const pino = expressPinoLogger({
-  transport: {
-    target: 'pino-pretty',
-    options: {
-      colorize: true,
-    },
-  },
-});
-pino.logger.level = 'warn';
+const {
+  setupDefaultMiddlewares,
+  setupAdditionalMiddlewars,
+} = require('./middlewares');
+const { loadRoutes, port, host } = require('./util');
 
 // const corsOptions = {
 //   origin: '*',
@@ -37,33 +22,16 @@ pino.logger.level = 'warn';
 //   maxAge: 3600,
 // };
 const app = express();
-app.use(pino);
-app.use(cors());
-app.options('*', cors());
-csp(app);
-app.use(express.urlencoded({ extended: false }));
-app.use(express.text({ type: 'text/plain' }));
-app.use(express.json({ type: 'application/json' }));
-app.use(express.json({ type: 'application/csp-report' }));
-
+setupDefaultMiddlewares(app);
 // load all custom routes from the application
 loadRoutes(app);
-
 // In production we need to pass these values in instead of relying on webpack
-setup(app, {
-  outputPath: resolve(process.cwd(), 'build/public'),
-  publicPath: getAssetPath(),
-});
-
-// get the intended host and port number, use localhost and port 3000 if not provided
-const customHost = argv.host || process.env.HOST;
-const host = customHost || null; // Let http.Server use its default IPv6/4 host
-const prettyHost = customHost || 'localhost';
+setupAdditionalMiddlewars(app);
 
 // Start your app.
 app.listen(port, host, async (err) => {
   if (err) {
     return logger.error(err.message);
   }
-  logger.appStarted(port, prettyHost);
+  logger.appStarted(port, host || 'localhost');
 });

package/lib/server/middlewares/addProdMiddlewares.js

@@ -1,25 +1,24 @@
-const path = require('path');
 const compression = require('compression');
 const expressStaticGzip = require('express-static-gzip');
 const { sendFileWithCSPNonce } = require('../csp');
+const { getPaths } = require('../../webpack/helpers');
 
-module.exports = function addProdMiddlewares(app, options) {
-  const publicPath = options.publicPath || '/';
-  const outputPath =
-    options.outputPath || path.resolve(process.cwd(), 'build/public');
+const paths = getPaths();
 
+module.exports = function addProdMiddlewares(app, options = {}) {
+  const { buildPath = paths.buildPath, basePath = paths.basePath } = options;
   // compression middleware compresses your server responses which makes them
   // smaller (applies also to assets). You can read more about that technique
   // and other good practices on official Express.js docs http://mxs.is/googmy
   app.use(compression());
 
-  app.get(publicPath, (req, res) => {
-    sendFileWithCSPNonce({ outputPath, res });
+  app.get(basePath, (req, res) => {
+    sendFileWithCSPNonce({ buildPath, res });
   });
 
   app.use(
-    publicPath,
-    expressStaticGzip(outputPath, {
+    basePath,
+    expressStaticGzip(buildPath, {
       index: false,
       enableBrotli: true,
       orderPreference: ['br'],
@@ -27,5 +26,5 @@ module.exports = function addProdMiddlewares(app, options) {
   );
   app.use(expressStaticGzip('cdn'));
 
-  app.get('*', (req, res) => sendFileWithCSPNonce({ outputPath, res }));
+  app.get('*', (req, res) => sendFileWithCSPNonce({ buildPath, res }));
 };

package/lib/server/middlewares/index.js

@@ -0,0 +1,37 @@
+const express = require('express');
+const cors = require('cors');
+const expressPinoLogger = require('express-pino-logger');
+const { csp } = require('../csp');
+const addProdMiddlewares = require('./addProdMiddlewares');
+const addDevMiddlewares = require('./addDevMiddlewares');
+const webpackConfig = require('../../webpack/webpack.dev.babel');
+
+exports.setupDefaultMiddlewares = (app) => {
+  const pino = expressPinoLogger({
+    transport: {
+      target: 'pino-pretty',
+      options: {
+        colorize: true,
+      },
+    },
+  });
+  pino.logger.level = 'warn';
+  app.use(pino);
+  app.use(cors());
+  app.options('*', cors());
+  csp(app);
+  app.use(express.urlencoded({ extended: false }));
+  app.use(express.text({ type: 'text/plain' }));
+  app.use(express.json({ type: 'application/json' }));
+  app.use(express.json({ type: 'application/csp-report' }));
+};
+
+exports.setupAdditionalMiddlewars = (app, options) => {
+  const isProd = process.env.NODE_ENV === 'production';
+  if (isProd) {
+    addProdMiddlewares(app, options);
+  } else {
+    addDevMiddlewares(app, webpackConfig);
+  }
+  return app;
+};

package/lib/server/util/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const argv = require('minimist')(process.argv.slice(2));
 
 const getCWD = () => process.cwd();
 
@@ -25,7 +26,7 @@ const getFilesMatching = (filePattern) => {
 const getServerRouteFiles = getFilesMatching(allJS);
 const getServiceEndpoints = getFilesMatching(serviceEndpoints);
 
-const loadRoutes = (app) => {
+exports.loadRoutes = (app) => {
   const routeFiles = getServerRouteFiles(path.join(getCWD(), 'server/routes'));
   routeFiles.push(...getServiceEndpoints(path.join(getCWD(), 'app')));
   routeFiles.push(...getServiceEndpoints(path.join(getCWD(), 'lib')));
@@ -41,7 +42,11 @@ const loadRoutes = (app) => {
   });
 };
 
-module.exports = {
-  getCWD,
-  loadRoutes,
-};
+exports.port = parseInt(
+  argv.port || process.env.port || process.env.PORT || '3000',
+  10,
+);
+
+exports.host = argv.host || process.env.HOST;
+
+exports.getCWD = getCWD;

package/lib/testing/jest.config.js

@@ -1,9 +1,11 @@
 const path = require('path');
 const normalizePath = require('normalize-path');
-const { getAppConfig, getAssetPath } = require('../webpack/helpers');
+const { getAppConfig, getPaths } = require('../webpack/helpers');
 const swcrcConfig = require('../transpile/swcrc.config.js');
 const { findMonoRepoRoot } = require('../monorepo/utils');
 
+const { basePath } = getPaths();
+
 let isReactModule = true;
 try {
   /* eslint-disable global-require, import/no-unresolved */
@@ -63,9 +65,10 @@ const jestConfig = {
       getMockFilePath('image.js'),
     '.*\\.svg$': getMockFilePath('svg.js'),
     '.*\\.(html)$': getMockFilePath('html.js'),
+    '.*index.html\\?resource$': getMockFilePath('html.js'),
     '@elliemae/pui-user-monitoring': getMockFilePath('pui-user-monitoring.js'),
-    '@elliemae/pui-app-loader': getMockFilePath('webpack-hmr.js'),
-    '@elliemae/pui-diagnostics': getMockFilePath('pui-app-loader.js'),
+    '@elliemae/pui-app-loader': getMockFilePath('pui-app-loader.js'),
+    '@elliemae/pui-diagnostics': getMockFilePath('pui-diagnostics.js'),
     'react-spring/web': getNodeModulesPath('react-spring/web.cjs.js'),
     'react-spring/renderprops': getNodeModulesPath(
       'react-spring/renderprops.cjs.js',
@@ -88,7 +91,9 @@ const jestConfig = {
     APP_CONFIG: getAppConfig(),
     __webpack_public_path__: '/',
   },
-  testURL: `http://localhost:3111${getAssetPath()}`,
+  testEnvironmentOptions: {
+    url: `http://localhost:3111${basePath}`,
+  },
   testEnvironment: 'jsdom',
 };
 

package/lib/webpack/helpers.js

@@ -150,9 +150,6 @@ const getENCWLoaderFileName = () => {
   )[0];
 };
 
-// base path for index page
-const getAssetPath = () => (process.env.ASSET_PATH || '/').replace(/\/?$/, '/');
-
 const getAppVersion = () => {
   if (!process.env.APP_VERSION) return LATEST_VERSION;
   const match = process.env.APP_VERSION.match(/^v?(\d+\.\d+)\..*$/);
@@ -161,19 +158,19 @@ const getAppVersion = () => {
 
 const getPaths = (latestVersion = true) => {
   const version = latestVersion ? LATEST_VERSION : getAppVersion();
-  const publicPath = `${getAssetPath()}${version}/`;
+  const publicPath = `${version}/`;
   const timeStampQuery =
     process.env.PUI_PIPELINE !== 'true' ? `?timeStamp=${Date.now()}` : '';
   return {
     appVersion: version,
-    buildPath: path.resolve(process.cwd(), `build/public/${version}`),
-    // base path for all assets
+    buildPath: path.resolve(process.cwd(), `build/public/`),
+    basePath: (process.env.BASE_PATH || '/').replace(/\/?$/, '/'),
     publicPath,
-    userMonScriptPath: `${publicPath}js/${getUserMonitoringFileName()}`,
-    appLoaderScriptPath: `${publicPath}js/${getAppLoaderFileName()}`,
-    diagnosticsScriptPath: `${publicPath}js/${getDiagnosticsFileName()}`,
-    globalScriptPath: `${publicPath}js/global.js${timeStampQuery}`,
-    encwLoaderScriptPath: `${publicPath}js/${getENCWLoaderFileName()}`,
+    userMonScriptPath: `latest/js/${getUserMonitoringFileName()}`,
+    appLoaderScriptPath: `latest/js/${getAppLoaderFileName()}`,
+    diagnosticsScriptPath: `latest/js/${getDiagnosticsFileName()}`,
+    globalScriptPath: `latest/js/global.js${timeStampQuery}`,
+    encwLoaderScriptPath: `latest/js/${getENCWLoaderFileName()}`,
   };
 };
 
@@ -227,11 +224,11 @@ const filterByFilePresence = (patterns) =>
       !noErrorOnMissing || fs.existsSync(path.resolve(process.cwd(), from)),
   );
 
+exports.LATEST_VERSION = LATEST_VERSION;
 exports.excludeNodeModulesExcept = excludeNodeModulesExcept;
 exports.getLibraryName = getLibraryName;
 exports.getAppConfig = getAppConfig;
 exports.mapToFolder = mapToFolder;
-exports.getAssetPath = getAssetPath;
 exports.isApp = isApp;
 exports.getAlias = getAlias;
 exports.getAppVersion = getAppVersion;

package/lib/webpack/webpack.base.babel.js

@@ -13,7 +13,6 @@ const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const {
   excludeNodeModulesExcept,
-  getAppConfig,
   modulesToTranspile,
   getAlias,
   getPaths,
@@ -29,18 +28,13 @@ const finalCSSLoader = (mode) =>
   mode !== 'production' ? { loader: 'style-loader' } : minicssLoader;
 
 const postcssPlugins = [PostcssPresetEnv({ autoprefixer: { grid: true } })];
-const { buildPath, publicPath } = getPaths();
+const { buildPath } = getPaths();
 
 const plugins = [
   new webpack.EnvironmentPlugin({
     NODE_ENV: 'development',
-    ASSET_PATH: '/',
-    PUBLIC_PATH: publicPath,
     CI: 'false',
   }),
-  new webpack.DefinePlugin({
-    APP_CONFIG: getAppConfig(),
-  }),
   new ProvidePlugin({
     React: 'react',
   }),
@@ -48,46 +42,47 @@ const plugins = [
     patterns: filterByFilePresence([
       {
         from: 'app/app.config.json',
-        to: 'app.config.json',
+        to: './latest/app.config.json',
       },
       {
         from: 'app/robots.txt',
-        to: '../robots.txt',
+        to: 'robots.txt',
         noErrorOnMissing: true,
       },
       {
         from: 'app/global*.js',
-        to: 'js/[name][ext]',
+        to: './latest/js/[name][ext]',
       },
       {
         from: 'node_modules/@elliemae/pui-user-monitoring/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/pui-app-loader/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/encw-loader/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'node_modules/@elliemae/pui-diagnostics/dist/public/js',
-        to: 'js',
+        to: './latest/js',
         toType: 'dir',
         noErrorOnMissing: true,
         info: { minimized: true },
       },
       {
         from: 'public',
+        to: './latest',
         noErrorOnMissing: true,
         globOptions: {
           ignore: ['readme.md'],
@@ -95,7 +90,6 @@ const plugins = [
       },
       {
         from: 'webroot',
-        to: '../',
         noErrorOnMissing: true,
         globOptions: {
           ignore: ['readme.md'],
@@ -105,8 +99,16 @@ const plugins = [
   }),
   new DuplicatePackageCheckerPlugin(),
   new MomentLocalesPlugin({ localesToKeep: ['es-us'] }),
-  new WebpackManifestPlugin(),
+  new WebpackManifestPlugin({
+    fileName: './latest/manifest.json',
+    publicPath: '',
+    map: (file) => {
+      file.name = file.name.replace(/^latest\//, '');
+      return file;
+    },
+  }),
   new FaviconsWebpackPlugin({
+    outputPath: './latest/assets',
     logo: './app/view/images/favicon.png',
     favicons: {
       developerName: 'ICE MT',
@@ -126,7 +128,7 @@ module.exports = (options) => ({
   output: {
     clean: true,
     path: buildPath,
-    publicPath,
+    publicPath: 'auto',
     ...options.output,
   }, // Merge with env dependent settings
   optimization: options.optimization,
@@ -236,4 +238,5 @@ module.exports = (options) => ({
   },
   devtool: options.devtool || 'eval-source-map',
   performance: options.performance || {},
+  devServer: options.devServer || {},
 });

package/lib/webpack/webpack.dev.babel.js

@@ -1,15 +1,17 @@
+/* eslint-disable max-lines */
 const path = require('path');
-const { HotModuleReplacementPlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const expressStaticGzip = require('express-static-gzip');
+const { setupDefaultMiddlewares } = require('../server/middlewares');
+const { loadRoutes } = require('../server/util');
 
 const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });
 
 const {
-  getAssetPath,
   isAppLoaderEnabled,
   getPaths,
   isGoogleTagManagerEnabled,
@@ -18,7 +20,8 @@ const baseConfigFactory = require('./webpack.base.babel');
 
 const {
   appVersion,
-  publicPath,
+  buildPath,
+  basePath,
   userMonScriptPath,
   globalScriptPath,
   appLoaderScriptPath,
@@ -39,14 +42,13 @@ const devConfig = {
 
   // Add hot reloading in development
   entry: {
-    app: [
-      'webpack-hot-middleware/client',
-      path.join(process.cwd(), 'app/index'),
-    ],
+    app: path.join(process.cwd(), 'app/index'),
   },
 
   // Don't use hashes in dev mode for better performance
   output: {
+    path: buildPath,
+    publicPath: 'auto',
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
     assetModuleFilename: '[name][ext][query]',
@@ -82,8 +84,6 @@ const devConfig = {
         : 'app/index-app-loader.html',
       emui: {
         appVersion,
-        assetPath: publicPath,
-        basePath: getAssetPath(),
         globalScriptPath,
         userMonScriptPath,
         appLoaderScriptPath,
@@ -107,16 +107,31 @@ const devConfig = {
   performance: {
     hints: false,
   },
+
+  devServer: {
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    devMiddleware: {
+      publicPath: basePath,
+    },
+    historyApiFallback: true,
+    hot: true,
+    open: [basePath],
+    port: 3000,
+    setupMiddlewares: (middlewares, devServer) => {
+      setupDefaultMiddlewares(devServer.app);
+      devServer.app.use(expressStaticGzip('cdn'));
+      loadRoutes(devServer.app);
+      return middlewares;
+    },
+  },
 };
 
 const config = smp.wrap(baseConfigFactory(devConfig));
-config.plugins = config.plugins.concat([
-  new HotModuleReplacementPlugin(),
-  new ReactRefreshWebpackPlugin({
-    overlay: {
-      sockIntegration: 'whm',
-    },
-  }),
-]);
+config.plugins = config.plugins.concat([new ReactRefreshWebpackPlugin({})]);
 
 module.exports = config;

package/lib/webpack/webpack.prod.babel.js

@@ -10,17 +10,14 @@ const browserslistToEsbuild = require('browserslist-to-esbuild');
 
 const baseConfigFactory = require('./webpack.base.babel');
 const {
-  getAssetPath,
   isAppLoaderEnabled,
-  LATEST_VERSION,
   getPaths,
-  getAppVersion,
   isGoogleTagManagerEnabled,
   getCompressionPlugins,
 } = require('./helpers');
 
 const getProdConfig = ({ latestVersion = true } = {}) => {
-  const { buildPath, publicPath } = getPaths(latestVersion);
+  const { buildPath } = getPaths(latestVersion);
 
   return {
     mode: 'production',
@@ -32,10 +29,10 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
     output: {
       path: buildPath,
-      publicPath,
-      filename: 'js/[name].[contenthash].js',
-      chunkFilename: 'js/[name].[contenthash].chunk.js',
-      assetModuleFilename: 'assets/[name].[hash][ext][query]',
+      publicPath: 'auto',
+      filename: 'latest/js/[name].[contenthash].js',
+      chunkFilename: 'latest/js/[name].[contenthash].chunk.js',
+      assetModuleFilename: 'latest/assets/[name].[hash][ext][query]',
     },
 
     optimization: {
@@ -64,11 +61,6 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
     },
 
     plugins: [
-      // new MiniCssExtractPlugin({
-      //   filename: 'css/[name].[contenthash].css',
-      //   chunkFilename: 'css/[name].[contenthash].chunk.css',
-      // }),
-
       ...getCompressionPlugins(),
 
       new BundleAnalyzerPlugin({
@@ -78,7 +70,7 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
       }),
 
       new GenerateSW({
-        swDest: '../sw.js',
+        swDest: 'sw.js',
         clientsClaim: true,
         skipWaiting: true,
       }),
@@ -94,15 +86,14 @@ const getProdConfig = ({ latestVersion = true } = {}) => {
 };
 
 const {
-  publicPath,
   userMonScriptPath,
   globalScriptPath,
   appLoaderScriptPath,
   diagnosticsScriptPath,
   encwLoaderScriptPath,
+  basePath,
 } = getPaths();
 const htmlWebpackPlugin = new HtmlWebpackPlugin({
-  filename: '../index.html',
   inject: !isAppLoaderEnabled(),
   template: !isAppLoaderEnabled()
     ? 'app/index.html'
@@ -121,8 +112,7 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
   },
   emui: {
     appVersion: 'latest',
-    assetPath: publicPath,
-    basePath: getAssetPath(),
+    basePath,
     globalScriptPath,
     userMonScriptPath,
     appLoaderScriptPath,
@@ -132,33 +122,21 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
   },
 });
 
-// user want to version the web app to support backward compatible releases
-const isVersionedApp =
-  isAppLoaderEnabled() && getAppVersion() !== LATEST_VERSION;
-
-const latestVersionConfig = baseConfigFactory(getProdConfig());
-latestVersionConfig.plugins.push(htmlWebpackPlugin);
+const config = baseConfigFactory(getProdConfig());
+config.plugins.push(htmlWebpackPlugin);
 
-const appVersionConfig = baseConfigFactory(
-  getProdConfig({ latestVersion: false }),
-);
-
-const addSMPPlugin = (config) => {
+const addSMPPlugin = (webpackConfig) => {
   const smpConfig = new SpeedMeasurePlugin({
     disable: !process.env.MEASURE,
-  }).wrap(config);
+  }).wrap(webpackConfig);
   // mini css extract plugin is not working fine with smp
   smpConfig.plugins.push(
     new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash].css',
-      chunkFilename: 'css/[name].[contenthash].chunk.css',
+      filename: 'latest/css/[name].[contenthash].css',
+      chunkFilename: 'latest/css/[name].[contenthash].chunk.css',
     }),
   );
   return smpConfig;
 };
 
-const config = isVersionedApp
-  ? [latestVersionConfig, appVersionConfig].map(addSMPPlugin)
-  : addSMPPlugin(latestVersionConfig);
-
-module.exports = config;
+module.exports = addSMPPlugin(config);

package/lib/webpack/webpack.storybook.js

@@ -1,21 +1,13 @@
-const { DefinePlugin, EnvironmentPlugin } = require('webpack');
+const { EnvironmentPlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ResolveTypeScriptPlugin = require('resolve-typescript-plugin');
-const {
-  getAppConfig,
-  isApp,
-  getAlias,
-  getCompressionPlugins,
-} = require('./helpers');
+const { isApp, getAlias, getCompressionPlugins } = require('./helpers');
 
 const IS_APP = isApp();
 const CWD = process.cwd();
 
 const getAdditionalPlugins = () => [
-  new DefinePlugin({
-    APP_CONFIG: getAppConfig(),
-  }),
   new EnvironmentPlugin({
     IS_APP,
     CWD,
@@ -55,6 +47,10 @@ const getModuleRules = () => [
     resourceQuery: /^((?!url).)*$/,
     use: ['@svgr/webpack'],
   },
+  {
+    resourceQuery: /resource/,
+    type: 'asset/resource',
+  },
 ];
 
 exports.webpackFinal = async (config, { configType }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-cli",
-  "version": "6.16.0",
+  "version": "7.0.0-alpha.1",
   "private": false,
   "description": "ICE MT UI Platform CLI",
   "sideEffects": false,
@@ -47,10 +47,10 @@
     "indent": 4
   },
   "dependencies": {
-    "@babel/cli": "~7.17.6",
-    "@babel/core": "~7.17.9",
+    "@babel/cli": "~7.17.10",
+    "@babel/core": "~7.17.10",
     "@babel/eslint-parser": "~7.17.0",
-    "@babel/node": "~7.16.8",
+    "@babel/node": "~7.17.10",
     "@babel/plugin-proposal-class-properties": "~7.16.7",
     "@babel/plugin-proposal-export-default-from": "~7.16.7",
     "@babel/plugin-syntax-dynamic-import": "~7.8.3",
@@ -58,8 +58,8 @@
     "@babel/plugin-transform-react-constant-elements": "~7.17.6",
     "@babel/plugin-transform-react-inline-elements": "~7.16.7",
     "@babel/plugin-transform-react-jsx-source": "~7.16.7",
-    "@babel/plugin-transform-runtime": "~7.17.0",
-    "@babel/preset-env": "~7.16.11",
+    "@babel/plugin-transform-runtime": "~7.17.10",
+    "@babel/preset-env": "~7.17.10",
     "@babel/preset-react": "~7.16.7",
     "@babel/preset-typescript": "~7.16.7",
     "@babel/runtime": "~7.17.9",
@@ -67,10 +67,10 @@
     "@commitlint/config-conventional": "~16.2.4",
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.4.2",
     "@faker-js/faker": "6.2.0",
-    "@nrwl/cli": "13.10.3",
-    "@nrwl/tao": "13.10.3",
-    "@nrwl/workspace": "13.10.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.4",
+    "@nrwl/cli": "14.0.5",
+    "@nrwl/tao": "14.0.5",
+    "@nrwl/workspace": "14.0.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "~0.5.5",
     "@semantic-release/changelog": "~6.0.1",
     "@semantic-release/exec": "~6.0.3",
     "@semantic-release/git": "~10.0.1",
@@ -80,7 +80,7 @@
     "@storybook/addon-interactions": "~6.4.22",
     "@storybook/addon-links": "~6.4.22",
     "@storybook/addon-storysource": "~6.4.22",
-    "@storybook/builder-vite": "~0.1.30",
+    "@storybook/builder-vite": "~0.1.32",
     "@storybook/builder-webpack5": "~6.4.22",
     "@storybook/manager-webpack5": "~6.4.22",
     "@storybook/react": "~6.4.22",
@@ -88,13 +88,13 @@
     "@stylelint/postcss-css-in-js": "~0.37.2",
     "@svgr/webpack": "~6.2.1",
     "@swc/cli": "~0.1.57",
-    "@swc/core": "~1.2.173",
+    "@swc/core": "~1.2.174",
     "@swc/jest": "~0.2.20",
     "@testing-library/jest-dom": "~5.16.4",
-    "@testing-library/react": "~12.1.4",
-    "@testing-library/react-hooks": "~7.0.2",
+    "@testing-library/react": "~13.1.1",
+    "@testing-library/react-hooks": "~8.0.0",
     "@types/jest": "~27.4.1",
-    "@types/node": "~17.0.29",
+    "@types/node": "~17.0.30",
     "@types/rimraf": "~3.0.2",
     "@types/testing-library__jest-dom": "~5.14.3",
     "@typescript-eslint/eslint-plugin": "~5.21.0",
@@ -159,14 +159,14 @@
     "eslint-plugin-testing-library": "~5.3.1",
     "eslint-plugin-wdio": "~7.19.4",
     "execa": "~5.1.1",
-    "express": "~4.18.0",
+    "express": "~4.18.1",
     "express-pino-logger": "~7.0.0",
     "express-static-gzip": "~2.1.5",
     "favicons": "~6.2.2",
     "favicons-webpack-plugin": "~5.0.2",
     "fast-glob": "~3.2.11",
     "find-up": "~5.0.0",
-    "happy-dom": "~2.55.0",
+    "happy-dom": "~3.1.0",
     "helmet-csp": "~3.4.0",
     "html-webpack-plugin": "~5.5.0",
     "http-server": "~14.1.0",
@@ -175,7 +175,8 @@
     "imports-loader": "~3.1.1",
     "ip": "~1.1.5",
     "jest-axe": "~6.0.0",
-    "jest-cli": "~27.5.1",
+    "jest-cli": "~28.0.3",
+    "jest-environment-jsdom": "~28.0.2",
     "jest-sonar-reporter": "~2.0.0",
     "jest-styled-components": "~7.0.8",
     "jscodeshift": "~0.13.1",
@@ -189,7 +190,7 @@
     "msw": "~0.39.2",
     "node-gyp": "~9.0.0",
     "node-plop": "~0.31.0",
-    "nodemon": "~2.0.15",
+    "nodemon": "~2.0.16",
     "normalize-path": "~3.0.0",
     "npm-check-updates": "12.5.10",
     "null-loader": "~4.0.1",
@@ -197,7 +198,7 @@
     "pino-pretty": "~7.6.1",
     "pinst": "~3.0.0",
     "plop": "~3.1.0",
-    "postcss": "~8.4.12",
+    "postcss": "~8.4.13",
     "postcss-html": "~1.4.1",
     "postcss-jsx": "~0.36.4",
     "postcss-loader": "~6.2.1",
@@ -210,7 +211,7 @@
     "raf": "~3.4.1",
     "react-axe": "~3.5.4",
     "react-docgen": "~5.4.0",
-    "react-refresh": "~0.11.0",
+    "react-refresh": "~0.13.0",
     "react-test-renderer": "~18.1.0",
     "resize-observer-polyfill": "~1.5.1",
     "resolve-typescript-plugin": "~1.2.0",
@@ -219,16 +220,17 @@
     "slackify-markdown": "~4.3.1",
     "speed-measure-webpack-plugin": "~1.5.0",
     "storybook-addon-turbo-build": "~1.1.0",
+    "storybook-builder-vite": "~0.1.23",
     "storybook-react-router": "~1.0.8",
     "style-loader": "~3.3.1",
-    "stylelint": "~14.8.0",
+    "stylelint": "~14.8.1",
     "stylelint-config-recommended": "~7.0.0",
     "stylelint-config-styled-components": "~0.1.1",
     "swc-loader": "~0.2.0",
     "terser-webpack-plugin": "~5.3.1",
     "ts-node": "~10.7.0",
     "tsc-alias": "~1.6.7",
-    "typescript": "~4.6.3",
+    "typescript": "~4.6.4",
     "update-notifier": "~5.1.0",
     "url-loader": "~4.1.1",
     "uuid": "~8.3.2",
@@ -238,6 +240,7 @@
     "webpack-bundle-analyzer": "~4.5.0",
     "webpack-cli": "~4.9.2",
     "webpack-dev-middleware": "~5.3.1",
+    "webpack-dev-server": "~4.8.1",
     "webpack-hot-middleware": "~2.25.1",
     "webpack-manifest-plugin": "~5.0.0",
     "webpack-merge": "~5.8.0",
@@ -246,8 +249,8 @@
     "yargs": "~17.4.1"
   },
   "devDependencies": {
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "~18.1.0",
+    "react-dom": "~18.1.0",
     "redux": "~4.2.0",
     "redux-saga": "~1.1.3",
     "styled-components": "~5.3.5"

package/lib/server/argv.js

@@ -1 +0,0 @@
-module.exports = require('minimist')(process.argv.slice(2));

package/lib/server/middlewares/frontendMiddleware.js

@@ -1,16 +0,0 @@
-/* eslint-disable global-require */
-
-module.exports = (app, options) => {
-  const isProd = process.env.NODE_ENV === 'production';
-
-  if (isProd) {
-    const addProdMiddlewares = require('./addProdMiddlewares');
-    addProdMiddlewares(app, options);
-  } else {
-    const webpackConfig = require('../../webpack/webpack.dev.babel');
-    const addDevMiddlewares = require('./addDevMiddlewares');
-    addDevMiddlewares(app, webpackConfig);
-  }
-
-  return app;
-};

package/lib/server/port.js

@@ -1,6 +0,0 @@
-const argv = require('./argv');
-
-module.exports = parseInt(
-  argv.port || process.env.port || process.env.PORT || '3000',
-  10,
-);