fix(sandbox): Build sandbox application with webpack

At this moment, vite's module federation plugin seems incompatible with webpack's counterpart, causing the steps extensions not to load. This commit adds a webpack config to build the sandbox application without removing vite. The reasoning is that vite offers a much faster experience and it's likely that the steps extensions won't be loaded as module federation but rather by being part of the final build. fixes: #2216 relates: #1759
KaotoIO · Aug 1, 2023 · ce08f3a · ce08f3a
1 parent 8aff31b
commit ce08f3a
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 3 deletions.
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -4,8 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
+    "start": "webpack serve -c ./webpack.config.cjs --host 0.0.0.0 --env dev",
+    "build": "webpack build -c ./webpack.config.cjs --env prod",
+    "start-vite": "vite",
+    "build-vite": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -40,8 +42,16 @@
     "eslint": "8.46.0",
     "eslint-config-prettier": "8.9.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "5.5.3",
+    "path-browserify": "^1.0.1",
     "sass": "^1.63.6",
+    "tar-webpack-plugin": "^0.1.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.0"
+    "vite": "^4.4.0",
+    "webpack": "5.88.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-merge": "^5.9.0"
   }
 }
diff --git a/packages/sandbox/webpack-template-index.html b/packages/sandbox/webpack-template-index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="utf-8">
+  <title>Kaoto</title>
+  <meta id="appName" name="application-name" content="Kaoto">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <noscript>Enabling JavaScript is required to run this app.</noscript>
+  <!-- root element for the React Host application  -->
+  <div id="root"></div>
+
+  <!-- root element for the Envelope applications  -->
+  <div id="envelope-app"></div>
+</body>
+
+</html>
diff --git a/packages/sandbox/webpack.config.cjs b/packages/sandbox/webpack.config.cjs
@@ -0,0 +1,121 @@
+const webpack = require('webpack');
+const path = require('path');
+const { merge } = require('webpack-merge');
+const webpackCommonConfig = require('../kaoto-ui/webpack.dev');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { federatedModuleName } = require('../kaoto-ui/package.json');
+
+webpackCommonConfig.plugins = webpackCommonConfig.plugins.filter((plugin) => {
+  return (
+    !(plugin instanceof HtmlWebpackPlugin) &&
+    !(plugin instanceof webpack.container.ModuleFederationPlugin)
+  );
+});
+webpackCommonConfig.module = undefined;
+webpackCommonConfig.resolve = undefined;
+
+module.exports = merge(webpackCommonConfig, {
+  entry: {
+    index: path.resolve(__dirname, './src/main.tsx'),
+    'kaoto-editor': path.resolve(__dirname, './src/envelope/KaotoEditorEnvelopeApp.ts'),
+    'serverless-workflow-text-editor': path.resolve(
+      __dirname,
+      './src/envelope/ServerlessWorkflowTextEditorEnvelopeApp.ts',
+    ),
+  },
+  output: {
+    path: path.resolve('./dist'),
+    hashDigestLength: 8,
+    filename: 'assets/[id]-[chunkhash].js',
+    assetModuleFilename: 'assets/[name]-[hash][ext]',
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        use: ['source-map-loader'],
+      },
+      {
+        test: /\.m?js/, // related to: https://github.com/webpack/webpack/discussions/16709
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+      {
+        test: /\.(tsx|ts|jsx)?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              experimentalWatchApi: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(ttf|eot|woff|woff2)$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(svg|jpg|jpeg|png|gif)$/i,
+        type: 'asset/inline',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      favicon: path.resolve(__dirname, 'src/assets', 'favicon.svg'),
+      chunks: ['index'],
+      template: path.resolve(__dirname, 'webpack-template-index.html'),
+      filename: 'index.html',
+    }),
+    new HtmlWebpackPlugin({
+      favicon: path.resolve(__dirname, 'src/assets', 'favicon.svg'),
+      chunks: ['kaoto-editor'],
+      template: path.resolve(__dirname, 'webpack-template-index.html'),
+      filename: 'envelope-kaoto-editor.html',
+    }),
+    new HtmlWebpackPlugin({
+      favicon: path.resolve(__dirname, 'src/assets', 'favicon.svg'),
+      chunks: ['serverless-workflow-text-editor'],
+      template: path.resolve(__dirname, 'webpack-template-index.html'),
+      filename: 'envelope-serverless-workflow-text-editor.html',
+    }),
+    new webpack.container.ModuleFederationPlugin({
+      name: federatedModuleName,
+      filename: 'remoteEntry.js',
+      library: { type: 'var', name: federatedModuleName },
+      shared: {
+        react: {
+          eager: true,
+        },
+        'react-dom': {
+          eager: true,
+        },
+      },
+    }),
+  ],
+  ignoreWarnings: [/Failed to parse source map/],
+  resolve: {
+    fallback: {
+      path: require.resolve('path-browserify'),
+    },
+    extensions: ['.js', '.ts', '.tsx', '.jsx'],
+    modules: ['node_modules'],
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: path.resolve(__dirname, './tsconfig.json'),
+      }),
+    ],
+    symlinks: false,
+    cacheWithContext: false,
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -3510,11 +3510,19 @@ __metadata:
     eslint: 8.46.0
     eslint-config-prettier: 8.9.0
     eslint-plugin-react-hooks: ^4.6.0
+    html-webpack-plugin: 5.5.3
+    path-browserify: ^1.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
     sass: ^1.63.6
+    tar-webpack-plugin: ^0.1.1
+    tsconfig-paths-webpack-plugin: ^4.0.1
     typescript: ^5.0.2
     vite: ^4.4.0
+    webpack: 5.88.2
+    webpack-cli: 5.1.4
+    webpack-dev-server: 4.15.1
+    webpack-merge: ^5.9.0
   languageName: unknown
   linkType: soft