mfe work

Author: baltazarparra

growlers/src/components/Cart.tsx

@@ -29,7 +29,7 @@ const Cart = () => {
         </Box>
       ))}
       <Box>
-        <Button width="100%">Checkout</Button>
+        <Button width="100%" onClick={() => (store.cart = [])}>Checkout</Button>
       </Box>
     </Box>
   );

growlers/webpack.config.js

@@ -48,10 +48,15 @@ module.exports = {
 
   plugins: [
     new ModuleFederationPlugin({
-      name: "starter",
+      name: "growlers",
       filename: "remoteEntry.js",
       remotes: {},
-      exposes: {},
+      exposes: {
+        './Cart': './src/components/Cart',
+        './Search': './src/components/Search',
+        './Taps': './src/components/Taps',
+        './store': './src/store',
+      },
       shared: {
         ...deps,
         react: {

host-react/src/App.tsx

@@ -1,8 +1,34 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { ChakraProvider } from '@chakra-ui/react'
 
 import "./index.css";
 
-const App = () => <div>Hi there, I'm React from Webpack 5.</div>;
+import { load } from 'growlers/store'
+import Taps from 'growlers/Taps'
+import Search from 'growlers/Search'
+import Cart from 'growlers/Cart'
+
+load('hv-taplist')
+
+const App = () => (
+    <ChakraProvider>
+        <div
+            style={{
+                maxWidth: '960px',
+                margin: 'auto',
+                display: 'grid',
+                gridTemplateColumns: '1fr 3fr',
+                gridColumnGap: '1rem'
+            }}
+        >
+            <div>
+                <Search />
+                <Cart />
+            </div>
+            <Taps />
+        </div>
+    </ChakraProvider>
+)
 
 ReactDOM.render(<App />, document.getElementById("app"));

host-react/webpack.config.js

@@ -4,15 +4,15 @@ const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPl
 const deps = require("./package.json").dependencies;
 module.exports = {
   output: {
-    publicPath: "http://localhost:8080/",
+    publicPath: "http://localhost:8081/",
   },
 
   resolve: {
     extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
   },
 
   devServer: {
-    port: 8080,
+    port: 8081,
   },
 
   module: {
@@ -40,9 +40,11 @@ module.exports = {
 
   plugins: [
     new ModuleFederationPlugin({
-      name: "starter",
+      name: "reactHost",
       filename: "remoteEntry.js",
-      remotes: {},
+      remotes: {
+        growlers: 'growlers@http://localhost:8080/remoteEntry.js'
+      },
       exposes: {},
       shared: {
         ...deps,