Merge pull request #197 from pagesource/feature/bug-fixing

added initial setup of module federation for SSG and SSR arch type apps

Author: vinodloha

.changeset/mean-bulldogs-compare.md

@@ -0,0 +1,5 @@
+---
+'create-universal-react': minor
+---
+
+added initial setup of module federation for SSG and SSR arch type apps

templates/base/next.config.js

@@ -3,8 +3,10 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 const withTM = require('next-transpile-modules')(['services']);
+const PACKAGE_JSON = require('./package.json');
 
 const isAssetPrefix = process.env.BASE_PATH || '';
+const APP_NAME = PACKAGE_JSON.name.toLowerCase();
 
 module.exports = withBundleAnalyzer(
   withTM({
@@ -19,8 +21,35 @@ module.exports = withBundleAnalyzer(
 
       config.plugins.push(
         new ModuleFederationPlugin({
+          name: `${APP_NAME}`,
+          remoteType: 'var',
+          // remotes: this is where we will include items to consume from remote
           remotes: {},
-          shared: []
+          // exposes: this is where we will include items to expose
+          exposes: {},
+          // shared: here we can put the list of modules we would like to share
+          shared: [
+            {
+              react: {
+                eager: true,
+                singleton: true,
+                requiredVersion: false
+              }
+            },
+            {
+              'react-dom': {
+                eager: true,
+                singleton: true,
+                requiredVersion: false
+              }
+            },
+            {
+              'styled-components': {
+                eager: true,
+                singleton: true
+              }
+            }
+          ]
         })
       );
 

templates/base/src/__tests__/_error.test.tsx

@@ -4,9 +4,9 @@ import '@testing-library/jest-dom/extend-expect';
 import Error from '../pages/_error';
 
 test('ErrorPage ', () => {
-  const { getByText, rerender } = render(<Error statusCode={'500'} />);
+  const { getByText, rerender } = render(<Error statusCode="500" />);
   expect(getByText('An error 500 occurred on server')).toBeInTheDocument();
   // Change props
-  rerender(<Error statusCode={''} />);
+  rerender(<Error statusCode="" />);
   expect(getByText('An error occurred on client')).toBeInTheDocument();
 });

templates/microApp/webpack.config.js

@@ -24,10 +24,35 @@ const APP_NAME = PACKAGE_JSON.name.toLowerCase();
  */
 const MF_CONFIG = {
   name: `${APP_NAME}_remote`,
+  // remotes: this is where we will include items to consume from remote
   remotes: {},
+  // exposes: this is where we will include items to expose
   exposes: {
     './app': './src/index'
-  }
+  },
+  // shared: here we can put the list of modules we would like to share
+  shared: [
+    {
+      react: {
+        eager: true,
+        singleton: true,
+        requiredVersion: false
+      }
+    },
+    {
+      'react-dom': {
+        eager: true,
+        singleton: true,
+        requiredVersion: false
+      }
+    },
+    {
+      'styled-components': {
+        eager: true,
+        singleton: true
+      }
+    }
+  ]
 };
 
 /**
@@ -81,7 +106,8 @@ module.exports = (env, argv) => {
     return instance;
   };
 
-  const addHTMLReplace = () => new HtmlReplaceWebpackPlugin([
+  const addHTMLReplace = () =>
+    new HtmlReplaceWebpackPlugin([
       {
         pattern: '@@app_name',
         replacement: APP_NAME

templates/ssg/next.config.js

@@ -6,8 +6,10 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 
 const withTM = require('next-transpile-modules')(['services']);
+const PACKAGE_JSON = require('./package.json');
 
 const isAssetPrefix = process.env.BASE_PATH || '';
+const APP_NAME = PACKAGE_JSON.name.toLowerCase();
 
 module.exports = withBundleAnalyzer(
   withTM({
@@ -18,16 +20,54 @@ module.exports = withBundleAnalyzer(
     },
     images: {
       loader: 'akamai',
-      path: '',
+      path: ''
     },
     // mandatory config for SSG with next export command
     exportPathMap: async function (
-    defaultPathMap,
-    { dev, dir, outDir, distDir, buildId }
+      defaultPathMap,
+      { dev, dir, outDir, distDir, buildId }
     ) {
       return {
         '/': { page: '/' }
-      }
+      };
+    },
+    webpack5: true,
+    webpack: (config, options) => {
+      config.plugins.push(
+        new options.webpack.container.ModuleFederationPlugin({
+          name: `${APP_NAME}`,
+          remoteType: 'var',
+          // remotes: this is where we will include items to consume from remote
+          remotes: {},
+          // exposes: this is where we will include items to expose
+          exposes: {},
+          // shared: here we can put the list of modules we would like to share
+          shared: [
+            {
+              react: {
+                eager: true,
+                singleton: true,
+                requiredVersion: false
+              }
+            },
+            {
+              'react-dom': {
+                eager: true,
+                singleton: true,
+                requiredVersion: false
+              }
+            },
+            {
+              'styled-components': {
+                eager: true,
+                singleton: true
+              }
+            }
+          ]
+        })
+      );
+
+      return config;
     }
   })
 );