IAM-4282 Migrate Vue CLI v4 to v5

Author: Andres Castillo

babel.config.js

@@ -1,10 +1,10 @@
 /**
- * @license
- * Copyright (c) 2020 ForgeRock. All rights reserved.
+ * Copyright (c) 2020-2023 ForgeRock. All rights reserved.
  *
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
  */
+
 module.exports = {
   // Disabled temporarily due a bug in babel: https://github.com/babel/babel/issues/12314
   // babelrcRoots: [
@@ -21,6 +21,6 @@ module.exports = {
     },
   },
   presets: [
-    ['@vue/app', { useBuiltIns: 'entry' }],
+    ['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }],
   ],
 };

dev-entrypoint.sh

@@ -14,7 +14,6 @@ export VUE_APP_BUILD_NUMBER=local
 export VUE_APP_BUILD_DATE_TIME="$(date +%s)"
 
 cd /home/app/packages/$1
-sed -i 's!\\!!g' .env
 
 if [[ -v SUBFOLDER ]]; then
     echo "Hosting under $SUBFOLDER"

package.json

@@ -55,7 +55,9 @@
     "vue-template-compiler": "2.7.14"
   },
   "resolutions": {
-    "ramda@npm:^0.25.0": "0.27.1"
+    "ramda@npm:^0.25.0": "0.27.1",
+    "autoprefixer": "10.4.5",
+    "yaml@npm:1.10.0": "1.10.2"
   },
   "workspaces": {
     "packages": [

packages/platform-enduser/.env.production

@@ -1,18 +1,18 @@
-VUE_APP_ADMIN_URL=\\$PLATFORM_ADMIN_URL
-VUE_APP_AM_URL=\\$AM_URL
-VUE_APP_AM_ADMIN_URL=\\$AM_ADMIN_URL
-VUE_APP_AUTO_ACCESS_API_URL=\\$AUTO_ACCESS_API_URL
-VUE_APP_AUTO_ACCESS_JAS_URL=\\$AUTO_ACCESS_JAS_URL
-VUE_APP_AUTO_ACCESS_TENANT_ID=\\$AUTO_ACCESS_TENANT_ID
-VUE_APP_ENABLE_AUTO_ACCESS=\\$ENABLE_AUTO_ACCESS
-VUE_APP_ENABLE_GOVERNANCE=\\$ENABLE_GOVERNANCE
-VUE_APP_ENABLE_GOVERNANCE_V4=\\$ENABLE_GOVERNANCE_V4
-VUE_APP_ENABLE_WORKFORCE=\\$ENABLE_WORKFORCE
-VUE_APP_ENDUSER_CLIENT_ID=\\$ENDUSER_CLIENT_ID
-VUE_APP_FRAAS=\\$PLATFORM_UI_IS_FRAAS
-VUE_APP_GOOGLE_MAPS_API_KEY=\\$GOOGLE_MAPS_API_KEY
-VUE_APP_IDM_URL=\\$IDM_REST_URL
-VUE_APP_I18N_LOCALE=\\$PLATFORM_UI_LOCALE
+VUE_APP_ADMIN_URL=$PLATFORM_ADMIN_URL
+VUE_APP_AM_URL=$AM_URL
+VUE_APP_AM_ADMIN_URL=$AM_ADMIN_URL
+VUE_APP_AUTO_ACCESS_API_URL=$AUTO_ACCESS_API_URL
+VUE_APP_AUTO_ACCESS_JAS_URL=$AUTO_ACCESS_JAS_URL
+VUE_APP_AUTO_ACCESS_TENANT_ID=$AUTO_ACCESS_TENANT_ID
+VUE_APP_ENABLE_AUTO_ACCESS=$ENABLE_AUTO_ACCESS
+VUE_APP_ENABLE_GOVERNANCE=$ENABLE_GOVERNANCE
+VUE_APP_ENABLE_GOVERNANCE_V4=$ENABLE_GOVERNANCE_V4
+VUE_APP_ENABLE_WORKFORCE=$ENABLE_WORKFORCE
+VUE_APP_ENDUSER_CLIENT_ID=$ENDUSER_CLIENT_ID
+VUE_APP_FRAAS=$PLATFORM_UI_IS_FRAAS
+VUE_APP_GOOGLE_MAPS_API_KEY=$GOOGLE_MAPS_API_KEY
+VUE_APP_IDM_URL=$IDM_REST_URL
+VUE_APP_I18N_LOCALE=$PLATFORM_UI_LOCALE
 VUE_APP_I18N_LOCALE=en
-VUE_APP_IGA_API_URL=\\$IGA_API_URL
+VUE_APP_IGA_API_URL=$IGA_API_URL
 THEME=default

packages/platform-enduser/package.json

@@ -25,7 +25,7 @@
     "bootstrap": "4.6.1",
     "bootstrap-vue": "2.22.0",
     "brace": "0.11.1",
-    "core-js": "3.6.5",
+    "core-js": "3.32.0",
     "d3-simple-slider": "1.10.4",
     "dayjs": "1.11.7",
     "es6-promise": "4.2.4",
@@ -43,13 +43,13 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "7.0.3",
-    "@vue/cli-plugin-babel": "4.5.18",
-    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-service": "5.0.8",
     "@vue/test-utils": "1.3.6",
     "@vue/vue2-jest": "29.2.5",
     "babel-core": "7.0.0-bridge.0",
     "chai": "4.1.2",
-    "copy-webpack-plugin": "5.0.3",
+    "copy-webpack-plugin": "11.0.0",
     "cypress": "6.9.1",
     "cypress-lighthouse": "0.1.0",
     "flush-promises": "1.0.2",
@@ -60,7 +60,7 @@
     "sass": "1.52.1",
     "sass-loader": "8.0.2",
     "style-resources-loader": "1.2.1",
-    "vue-cli-plugin-i18n": "0.6.0",
+    "vue-cli-plugin-i18n": "2.3.2",
     "vue-template-compiler": "2.7.14"
   },
   "postcss": {

packages/platform-enduser/vue.config.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2022 ForgeRock. All rights reserved.
+ * Copyright (c) 2020-2023 ForgeRock. All rights reserved.
  *
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
@@ -9,6 +9,7 @@
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const dotenv = require('dotenv');
 
 function generateTheme() {
   let variableLoad = `
@@ -34,33 +35,35 @@ function getPlugins() {
     new webpack.BannerPlugin('Copyright (c) 2020 ForgeRock. All rights reserved. This software may be modified and distributed under the terms of the MIT license. See the LICENSE file for details.'),
   ];
 
-  plugins.push(new CopyWebpackPlugin([
-    {
-      from: '../../node_modules/appauthhelper-enduser/appAuthHelperRedirect.html',
-      to: 'appAuthHelperRedirect.html',
-      toType: 'file',
-    },
-    {
-      from: '../../node_modules/appauthhelper-enduser/appAuthServiceWorker.js',
-      to: 'appAuthServiceWorker.js',
-      toType: 'file',
-    },
-    {
-      from: '../../node_modules/appauthhelper-enduser/appAuthHelperFetchTokensBundle.js',
-      to: 'appAuthHelperFetchTokensBundle.js',
-      toType: 'file',
-    },
-    {
-      from: '../../node_modules/oidcsessioncheck-enduser/sessionCheck.html',
-      to: 'sessionCheck.html',
-      toType: 'file',
-    },
-    {
-      from: '../../node_modules/oidcsessioncheck-enduser/sessionCheckFrame.js',
-      to: 'sessionCheckFrame.js',
-      toType: 'file',
-    },
-  ]));
+  plugins.push(new CopyWebpackPlugin({
+    patterns: [
+      {
+        from: '../../node_modules/appauthhelper-enduser/appAuthHelperRedirect.html',
+        to: 'appAuthHelperRedirect.html',
+        toType: 'file',
+      },
+      {
+        from: '../../node_modules/appauthhelper-enduser/appAuthServiceWorker.js',
+        to: 'appAuthServiceWorker.js',
+        toType: 'file',
+      },
+      {
+        from: '../../node_modules/appauthhelper-enduser/appAuthHelperFetchTokensBundle.js',
+        to: 'appAuthHelperFetchTokensBundle.js',
+        toType: 'file',
+      },
+      {
+        from: '../../node_modules/oidcsessioncheck-enduser/sessionCheck.html',
+        to: 'sessionCheck.html',
+        toType: 'file',
+      },
+      {
+        from: '../../node_modules/oidcsessioncheck-enduser/sessionCheckFrame.js',
+        to: 'sessionCheckFrame.js',
+        toType: 'file',
+      },
+    ],
+  }));
 
   return plugins;
 }
@@ -76,20 +79,31 @@ module.exports = {
     },
   },
   devServer: {
-    before: (app) => {
+    setupMiddlewares: (middlewares, devServer) => {
       if (SUBFOLDER !== './') {
-        app.get(SUBFOLDER.replace(/\/$/, '$'), (req, res) => {
+        devServer.app.get(SUBFOLDER.replace(/\/$/, '$'), (req, res) => {
           res.redirect(SUBFOLDER);
         });
       } else {
-        app.all((req, res, next) => {
+        devServer.app.all((req, res, next) => {
           next();
         });
       }
+      return middlewares;
     },
-    disableHostCheck: true,
+    allowedHosts: 'all',
     host: process.env.HOST || '0.0.0.0',
     port: process.env.DEV_PORT || 8888,
+    client: {
+      webSocketURL: {
+        hostname: 'localhost',
+        pathname: 'ws',
+        port: process.env.DEV_PORT || 8888,
+      },
+    },
+    webSocketServer: process.env.NODE_ENV !== 'development' ? false : 'ws',
+    compress: false,
+    historyApiFallback: true,
   },
   chainWebpack: (config) => {
     config.module
@@ -99,6 +113,30 @@ module.exports = {
         ...options,
         rootMode: 'upward',
       }));
+
+    /**
+     * Regenerates the environment variables using the define plugin of webpack in non-development environments
+     *   - before building load the environment variables from .env file using dotenv module
+     *   - format those variables to fit the string format required by define plugin
+     *   - overwrites the formated variables to the webpack definitions
+     * This is required due to an error replacing environment variables on the final bundle where they are replaced by empty values
+     */
+    if (process.env.NODE_ENV !== 'development') {
+      config
+        .plugin('define')
+        .tap((definitions) => {
+          const envs = dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
+          const envsFormatted = Object.entries(envs.parsed).reduce((newEnvs, [key, value]) => {
+            newEnvs[key] = JSON.stringify(value);
+            return newEnvs;
+          }, {});
+          definitions[0]['process.env'] = {
+            ...definitions[0]['process.env'],
+            ...envsFormatted,
+          };
+          return definitions;
+        });
+    }
   },
   configureWebpack: {
     plugins: getPlugins(),
@@ -125,6 +163,12 @@ module.exports = {
   ],
   css: {
     loaderOptions: {
+      css: {
+        modules: {
+          auto: () => true,
+          mode: 'global',
+        },
+      },
       sass: {
         prependData: generateTheme(),
       },

packages/platform-login/.env.production

@@ -1,12 +1,12 @@
-VUE_APP_ALIGN_GOTO_PRECEDENCE=\\$ALIGN_GOTO_PRECEDENCE
-VUE_APP_AM_URL=\\$AM_URL
-VUE_APP_AM_ADMIN_URL=\\$AM_ADMIN_URL
-VUE_APP_IDM_URL=\\$IDM_REST_URL
-VUE_APP_ADMIN_URL=\\$PLATFORM_ADMIN_URL
-VUE_APP_ENDUSER_URL=\\$ENDUSER_UI_URL
-VUE_APP_I18N_LOCALE=\\$PLATFORM_UI_LOCALE
-VUE_APP_FRAAS=\\$PLATFORM_UI_IS_FRAAS
-VUE_APP_FRAAS_PROMOTION_CONFIG_INGRESS_URL=\\$LOWER_CONFIG_INGRESS
-VUE_APP_FRAAS_PROMOTION_CONFIG_EGRESS_URL=\\$UPPER_CONFIG_EGRESS
+VUE_APP_ALIGN_GOTO_PRECEDENCE=$ALIGN_GOTO_PRECEDENCE
+VUE_APP_AM_URL=$AM_URL
+VUE_APP_AM_ADMIN_URL=$AM_ADMIN_URL
+VUE_APP_IDM_URL=$IDM_REST_URL
+VUE_APP_ADMIN_URL=$PLATFORM_ADMIN_URL
+VUE_APP_ENDUSER_URL=$ENDUSER_UI_URL
+VUE_APP_I18N_LOCALE=$PLATFORM_UI_LOCALE
+VUE_APP_FRAAS=$PLATFORM_UI_IS_FRAAS
+VUE_APP_FRAAS_PROMOTION_CONFIG_INGRESS_URL=$LOWER_CONFIG_INGRESS
+VUE_APP_FRAAS_PROMOTION_CONFIG_EGRESS_URL=$UPPER_CONFIG_EGRESS
 VUE_APP_I18N_LOCALE=en
-THEME=default
+THEME=default

packages/platform-login/package.json

@@ -22,7 +22,7 @@
     "bootstrap": "4.6.1",
     "bootstrap-vue": "2.22.0",
     "clipboard-polyfill": "3.0.1",
-    "core-js": "3.6.5",
+    "core-js": "3.32.0",
     "flush-promises": "1.0.2",
     "jose": "4.14.4",
     "lodash": "4.17.21",
@@ -44,12 +44,12 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "7.0.3",
-    "@vue/cli-plugin-babel": "4.5.18",
-    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-service": "5.0.8",
     "@vue/test-utils": "1.3.6",
     "@vue/vue2-jest": "29.2.5",
     "babel-core": "7.0.0-bridge.0",
-    "copy-webpack-plugin": "5.0.3",
+    "copy-webpack-plugin": "11.0.0",
     "cypress": "6.9.1",
     "cypress-file-upload": "5.0.6",
     "cypress-lighthouse": "0.1.0",
@@ -60,7 +60,7 @@
     "sass": "1.52.1",
     "sass-loader": "8.0.2",
     "style-resources-loader": "1.2.1",
-    "vue-cli-plugin-i18n": "0.6.0",
+    "vue-cli-plugin-i18n": "2.3.2",
     "vue-template-compiler": "2.7.14"
   },
   "postcss": {

packages/platform-login/src/main.js

@@ -7,6 +7,7 @@
 
 import 'whatwg-fetch';
 import 'core-js/stable';
+import '@forgerock/platform-shared/src/utils/domCollectionsForEach';
 import 'regenerator-runtime/runtime';
 
 import Vue from 'vue';