feat: add step 4 exercises, code and slides

slides.md

@@ -423,7 +423,7 @@ config.plugins.push(
 
 <div class="dense">
 
-## Create a Next.js app and inside of it:  
+## Create a Next.js app and inside of it:
 
 -- Create `components/nextjs-layout-box.js` file.
 
@@ -517,7 +517,7 @@ You should see the `LayoutBox` component acting as a wrapper and the remote comp
 
 <div class="dense">
 
-In this step we are going to demonstrate Module Federation's bi-directional ability to share modules between multiple apps that can act both as the host and the remote at the same time by putting together what we learned in the previous two steps.  
+In this step we are going to demonstrate Module Federation's bi-directional ability to share modules between multiple apps that can act both as the host and the remote at the same time by putting together what we learned in the previous two steps.
 
 </div>
 
@@ -623,7 +623,7 @@ new NextFederationPlugin({
     remotes: {
         remote: 'reactApp@http://localhost:8080/remoteEntry.js',
     },
-    exposes: {            
+    exposes: {
         './nextjs-layout-box': './components/nextjs-layout-box.js',
         './nextjs-table': './components/nextjs-table.js'
     },
@@ -744,8 +744,8 @@ module.exports = {
       filename: 'remoteEntry.js',
       exposes: { './Button': './src/components/Button' },
       shared: {
-        react: { singleton: true, requiredVersion: '18.2.0' },
-        'react-dom': { singleton: true, requiredVersion: '18.2.0' },
+        react: { singleton: true, requiredVersion: require('./package.json').dependencies.react },
+        'react-dom': { singleton: true, requiredVersion: require('./package.json').dependencies['react-dom'] },
       },
     }),
   ],
@@ -754,6 +754,100 @@ module.exports = {
 
 ---
 
+# Step 4: Setting up Shared Modules Example
+
+<div class="dense">
+
+In this step we are going to demonstrate sharing dependencies (React and React DOM) across federated modules.
+
+</div>
+
+---
+
+# Step 4: Exercise
+
+<div class="dense">
+
+-- take the applications you created as part of step 3 exercises;
+
+-- modify Webpack config of the React app to have React and React DOM as shared dependencies;
+
+-- modify Next.js config of the Next.js app to have React and React DOM as shared dependencies;
+
+-- set the versions of these shared dependencies to be read from respective `package.json` files;
+
+-- make sure the dependencies are being shared as singletons;
+
+-- try changing the version of the React and React DOM in the `package.json` file of the React app to a previous one and make sure you get a warning about version mismatch in the console.
+
+</div>
+
+---
+
+# Step 4: Solution
+
+```js
+// next.config.js
+// ...
+    new NextFederationPlugin({
+// ...
+      shared: {
+        react: {
+          requiredVersion:
+            require('./package.json').dependencies.react,
+          singleton: true,
+        },
+        'react-dom': {
+          requiredVersion:
+            require('./package.json').dependencies['react-dom'],
+          singleton: true,
+        },
+      },
+      extraOptions: {
+        skipSharingNextInternals: true,
+      }
+    })
+// ...
+```
+
+---
+
+# Step 4: Solution /2
+
+```js
+// webpack.config.js
+// ...
+    new ModuleFederationPlugin({
+// ...
+      shared: {
+        react: {
+          requiredVersion:
+            require('./package.json').dependencies.react,
+          singleton: true,
+        },
+        'react-dom': {
+          requiredVersion:
+            require('./package.json').dependencies['react-dom'],
+          singleton: true,
+        },
+      },
+    }),
+// ...
+)}
+```
+
+---
+
+# Step 4: Result
+
+![Requests of the Next.js app](/images/step-04-results1.png "Requests of the Next.js app")
+
+![Requests of the React app](/images/step-04-results2.png "Requests of the React app")
+
+![Version mismatch warning](/images/step-04-results3.png "Version mismatch warning")
+
+---
+
 # Federated Types
 
 <div class="dense">
@@ -770,7 +864,7 @@ When it comes to TypeScript applications, the most common problem with using ext
 -- @module-federation/native-federation-typescript.
 
 <p>
-Something to keep in mind is that the host is becoming dependent on the remote types which means that each time remote changes its types, it can potentially break the host.
+Something to keep in mind when using remote types in the host is that as a result the host can become dependent on them. This means that each time remote changes its types, it can potentially break the host.
 </p>
 
 </div>

src/step-03-bi-directional/nextApp/components/nextjs-table.js

@@ -12,7 +12,7 @@ const Table = ({ data }) => {
       </thead>
       <tbody>
         {data.map((d, i) => (
-          <tr key={d.i}>
+          <tr key={`${d}.${i}`}>
             <td>{d.company}</td>
             <td>{d.state}</td>
             <td>{d.country}</td>

src/step-03-bi-directional/nextApp/next.config.js

@@ -1,4 +1,4 @@
-const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin');
+const NextFederationPlugin = require('@module-federation/nextjs-mf/lib/NextFederationPlugin')
 
 module.exports = {
   webpack(config, options) {
@@ -10,9 +10,10 @@ module.exports = {
             remote: 'reactApp@http://localhost:8080/remoteEntry.js',
           },
           filename: 'static/chunks/remoteEntry.js',
-          exposes: {            
-            './nextjs-layout-box': './components/nextjs-layout-box.js',
-            './nextjs-table': './components/nextjs-table.js'
+          exposes: {
+            './nextjs-layout-box':
+              './components/nextjs-layout-box.js',
+            './nextjs-table': './components/nextjs-table.js',
           },
           shared: {
             react: {
@@ -23,11 +24,11 @@ module.exports = {
           extraOptions: {
             skipSharingNextInternals: true,
           },
-        }),
-      );
+        })
+      )
     }
-    return config;
+    return config
   },
   // your original next.config.js export
   reactStrictMode: true,
-};
+}

src/step-03-bi-directional/package.json

@@ -1,14 +1,11 @@
 {
   "name": "bi-directional",
   "private": true,
-  "workspaces": [
-    "./reactApp",
-    "./nextApp"
-  ],
+  "workspaces": ["./reactApp", "./nextApp"],
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "concurrently \"cd reactApp; npm start\" \"cd nextApp; npm run dev\""    
+    "start": "concurrently \"cd reactApp; npm start\" \"cd nextApp; npm run dev\" --kill-others"
   }
 }

src/step-03-bi-directional/reactApp/public/index.html

@@ -8,6 +8,5 @@
 </head>
 <body>
     <div id="root"></div>
-    <script src="main.js"></script>
 </body>
 </html>

src/step-03-bi-directional/reactApp/webpack.config.js

@@ -1,6 +1,7 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
-const deps = require('./package.json').dependencies;
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ModuleFederationPlugin =
+  require('webpack').container.ModuleFederationPlugin
+const deps = require('./package.json').dependencies
 module.exports = {
   entry: './src/index',
   entry: {
@@ -9,22 +10,17 @@ module.exports = {
     },
   },
   cache: false,
-
   mode: 'development',
   devtool: 'source-map',
-
   optimization: {
     minimize: false,
   },
-
   output: {
     publicPath: 'auto',
   },
-
   resolve: {
     extensions: ['.jsx', '.js', '.json', '.mjs'],
   },
-
   module: {
     rules: [
       {
@@ -42,31 +38,25 @@ module.exports = {
           presets: [require.resolve('@babel/preset-react')],
         },
       },
-      { test: /\.css$/, use: ["style-loader", "css-loader"] },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     ],
   },
-
   plugins: [
     new ModuleFederationPlugin({
       name: 'reactApp',
       filename: 'remoteEntry.js',
       remotes: {
-        remote: 'nextApp@http://localhost:8081/_next/static/chunks/remoteEntry.js',
+        remote:
+          'nextApp@http://localhost:8081/_next/static/chunks/remoteEntry.js',
       },
       exposes: {
         './Nav': './src/components/Nav',
-        './Title': './src/components/Title'
-      },
-      shared: {
-        react: {
-          // Notice shared are NOT eager here.
-          requiredVersion: false,
-          singleton: true,
-        },
+        './Title': './src/components/Title',
       },
+      shared: {},
     }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
     }),
   ],
-};
+}