dataentry-mfe initial setup (mercedes-benz#2713)

deployment/kubernetes/helm/charts/frontend/values.yaml

@@ -76,12 +76,14 @@ configJs: |
       ENABLE_CHRONOS_FORECASTING_SERVICE: "false",
       ENABLE_DATALAKE_SERVICE: "false",
       ENABLE_FABRIC_SERVICE: "false",
+      ENABLE_DATA_ENTRY_SERVICE: "false",
       CHRONOS_MFE_APP_URL:"http://localhost:8085",
       ENABLE_MATOMO_SERVICE:"true",
       MATOMO_MFE_APP_URL:"http://localhost:8089",
       MATOMO_APP_URL:"YOUR_MATOMO_APP_URL",
       DATALAKE_MFE_APP_URL: 'http://localhost:8090',
       FABRIC_MFE_APP_URL: 'http://localhost:8091',
+      DATA_ENTRY_MFE_APP_URL: 'http://localhost:8092',
 
       UDEMY_URL= "YOUR_UDEMY_URL",
       LINKEDIN_LEARNING_URL= "YOUR_LINKEDIN_LEARNING_URL",
@@ -171,6 +173,15 @@ configJs: |
         STORAGE_API_BASEURL: 'http://localhost:7175/api',
         REPORTS_API_BASEURL: 'http://localhost:7173/api',
         TOU_HTML: "<div>I agree to <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">terms of use</a></div>", 
+    };
+
+    window["DATA_ENTRY_INJECTED_ENVIRONMENT"]={
+        CONTAINER_APP_URL:'http://localhost:9090',
+        API_BASEURL: 'http://localhost:7171/api',
+        DATA_ENTRY_API_BASEURL: 'YOUR_DATA_ENTRY_API_BASEURL',
+        STORAGE_API_BASEURL: 'http://localhost:7175/api',
+        REPORTS_API_BASEURL: 'http://localhost:7173/api',
+        TOU_HTML: "<div>I agree to <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">terms of use</a></div>", 
     }; 
 
     

packages/dataentry-mfe/.docker.env

@@ -0,0 +1,6 @@
+CONTAINER_APP_URL=${PROJECTSMO_CONTAINER_APP_URL}
+API_BASEURL=${PROJECTSMO_API_BASEURL}
+DATA_ENTRY_API_BASEURL=${PROJECTSMO_DATA_ENTRY_API_BASEURL}
+REPORTS_API_BASEURL=${PROJECTSMO_REPORTS_API_BASEURL}
+STORAGE_API_BASEURL=${PROJECTSMO_STORAGE_API_BASEURL}
+TOU_HTML=${PROJECTSMO_TOU_HTML}

packages/dataentry-mfe/.env

@@ -0,0 +1,6 @@
+CONTAINER_APP_URL= http://localhost:9090
+API_BASEURL= 
+DATA_ENTRY_API_BASEURL= 
+REPORTS_API_BASEURL=
+STORAGE_API_BASEURL=
+TOU_HTML= 

packages/dataentry-mfe/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/dataentry-mfe/config/base.config.js

@@ -0,0 +1,151 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const deps = require('../package.json').dependencies;
+const Dotenv = require('dotenv-webpack');
+const path = require('path');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const webpack = require('webpack');
+const ExternalTemplateRemotesPlugin = require('external-remotes-plugin');
+const copyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(eot|woff2|woff|svg|otf)/,
+        dependency: { not: ['url'] },
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 1000,
+              name: 'fonts/[name]-[contenthash].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(ttf)/,
+        dependency: { not: ['url'] },
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 1000,
+              name: 'fonts/[name].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              importLoaders: 1,
+              modules: {
+                auto: (resourcePath) => !resourcePath.includes('uilab'),
+                localIdentName: '[name]_[local]_[hash:base64:5]',
+              },
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+        include: [path.resolve(__dirname, path.join('..', 'src'))],
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+        ],
+        exclude: [path.resolve(__dirname, path.join('..', 'src'))],
+      },
+      {
+        test: /config.js/,
+        use: [
+          {
+            loader: 'raw-loader',
+          },
+        ],
+        include: [path.resolve(__dirname, path.join('..', 'public'))],
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Dotenv({
+      path: process.env.NODE_ENV === 'development' ? '../.env' : '../.docker.env',
+    }),
+    new ESLintPlugin({
+      extensions: ['js'],
+      fix: true,
+    }),
+    //async await support in es6
+    new webpack.ProvidePlugin({
+      regeneratorRuntime: 'regenerator-runtime/runtime',
+      Promise: ['es6-promise', 'Promise'],
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      favicon: './src/appIcon/logo.png',
+    }),
+    new ExternalTemplateRemotesPlugin(),
+    new ModuleFederationPlugin({
+      name: 'data_entry_mfe',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './DataEntry': './src/App',
+      },
+      remotes: {
+        'dna-container': `dna_container@[(window.DATA_ENTRY_INJECTED_ENVIRONMENT && window.DATA_ENTRY_INJECTED_ENVIRONMENT.CONTAINER_APP_URL)]/remoteEntry.js?[(new Date()).getTime()]`,
+      },
+      shared: {
+        ...deps,
+        react: { singleton: true, eager: true, requiredVersion: deps.react },
+        'react-dom': {
+          singleton: true,
+          eager: true,
+          requiredVersion: deps['react-dom'],
+        },
+        'react-router-dom': {
+          singleton: true,
+          eager: true,
+          requiredVersion: deps['react-router-dom'],
+        },
+      },
+    }),
+    new copyWebpackPlugin({ patterns: [{ from: 'public/config.js', toType: 'dir' }] }),
+  ],
+};

packages/dataentry-mfe/config/webpack.config.js

@@ -0,0 +1,37 @@
+const { MFLiveReloadPlugin } = require('@module-federation/fmr');
+const base = require('./base.config');
+const { merge } = require('webpack-merge');
+
+const devConfig = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 8091,
+    historyApiFallback: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env' /* to transfer any advansed ES to ES5 */, '@babel/preset-react'], // to compile react to ES5
+          plugins: [['@babel/plugin-transform-runtime']],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new MFLiveReloadPlugin({
+      port: 8092,
+      container: 'data-entry-mfe',
+      standalone: false,
+    }),
+  ],
+};
+
+module.exports = merge(base, devConfig);

packages/dataentry-mfe/config/webpack.prod.config.js

@@ -0,0 +1,70 @@
+const webpack = require('webpack');
+const packageJson = require('../package.json');
+const miniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const packageName = packageJson.name.replace(/@/, '-').replace(/\//, '-');
+const version = packageJson.version.toLowerCase().trim();
+const ESLintPlugin = require('eslint-webpack-plugin');
+const optimizeCSSAssetsPlugin = require('css-minimizer-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const terserPlugin = require('terser-webpack-plugin');
+const duplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
+const base = require('./base.config');
+const { merge } = require('webpack-merge');
+
+const prodConfig = {
+  mode: 'production',
+  target: 'web',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: `${packageName}_${version}_[name].[fullhash].js`,
+    chunkFilename: `${packageName}_${version}_[name].[fullhash].bundle.js`,
+    clean: true,
+    publicPath: 'auto',
+  },
+  devtool: false,
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env' /* to transfer any advansed ES to ES5 */, '@babel/preset-react'], // to compile react to ES5
+          plugins: [['@babel/plugin-transform-runtime']],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.ids.HashedModuleIdsPlugin(),
+    new duplicatePackageCheckerPlugin(),
+    new ESLintPlugin({
+      extensions: ['js'],
+      fix: true,
+    }),
+    new miniCssExtractPlugin({
+      filename: `${packageName}_${version}_[name].[fullhash].css`,
+      chunkFilename: `${packageName}_${version}_[name].[fullhash].bundle.css`,
+    }),
+  ],
+  optimization: {
+    minimizer: [
+      new terserPlugin({
+        extractComments: true,
+        parallel: true,
+        terserOptions: {
+          safari10: true,
+        },
+      }),
+      new optimizeCSSAssetsPlugin({}),
+    ],
+    splitChunks: {
+      chunks: 'async',
+    },
+  },
+};
+
+module.exports = merge(base, prodConfig);