Merge pull request #19 from bitovi/run-through/updates

small tweaks

package.json

@@ -2,7 +2,9 @@
   "name": "enterprise-grade-micro-frontends",
   "version": "0.0.0",
   "license": "MIT",
-  "scripts": {},
+  "scripts": {
+    "start": "nx run-many -t --parallel=10"
+  },
   "private": true,
   "devDependencies": {
     "@nx/jest": "18.3.3",

packages/shell/src/components/Layout/Layout.tsx

@@ -1,4 +1,6 @@
-import { FC, Suspense, lazy } from "react";
+import type { FC } from "react";
+
+import { Suspense, lazy } from "react";
 import { Navigate, Outlet } from "react-router-dom";
 import { Container, Flex } from "@mantine/core";
 import { readLocalStorageValue } from "@mantine/hooks";

packages/shell/src/scenes/Account/Account.tsx

@@ -1,4 +1,4 @@
-import type { AccountScene } from 'shared/profile';
+import type { FC } from "react";
 
 import { Suspense, lazy } from "react";
 import {
@@ -13,10 +13,9 @@ import {
 import { ErrorBoundary } from "react-error-boundary";
 import { Link } from "react-router-dom";
 
-// @ts-ignore
-const Account = lazy<AccountScene>(() => import("profile/account"));
+const Account = lazy(() => import("profile/account"));
 
-const AccountScene: AccountScene = () => {
+const AccountScene: FC = () => {
   return (
     <ErrorBoundary fallback={<AccountError />}>
       <Suspense fallback={<AccountSkeleton />}>
@@ -28,7 +27,7 @@ const AccountScene: AccountScene = () => {
 
 export default AccountScene;
 
-const AccountSkeleton = () => {
+const AccountSkeleton: FC = () => {
   return (
     <Container>
       <Skeleton mb="xl" h={45} />
@@ -44,7 +43,7 @@ const AccountSkeleton = () => {
   );
 };
 
-const AccountError = () => {
+const AccountError: FC = () => {
   return (
     <Flex align="center" direction="column">
       <Title mb="md" c="red">

packages/workshop/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "rsbuild dev --open --port 8080",
+    "dev": "rsbuild dev --port 8080",
     "build": "rsbuild build",
     "preview": "rsbuild preview"
   },

packages/workshop/src/scenes/Exercises/components/AddingMoreMicroFrontends/AddingMoreMicroFrontends.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "react";
 
-import { Image, List, Text } from "@mantine/core";
+import { Code, Image, List, Text } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 
 import ExerciseLayout from "../../shared/components/ExerciseLayout";
@@ -19,23 +19,28 @@ const AddingMoreMicroFrontends: FC = () => {
         a couple of key features for our users – the cart and the search bar.
       </Text>
       <Image my="lg" src={header} />
+
       <Text>
         Both features are MFEs the Header needs to consume. You may continue
-        from your work on Exercise 3, or check out a clean branch using the
-        command below.
+        from your work on the previous exercise, or check out a clean branch
+        using the command below.
       </Text>
-      <CodeHighlight my="lg" lang="console" code="git checkout exercise-4" />
+      <CodeHighlight my="lg" code="git checkout soln/fault-tolerance" />
       <Text pt="md">
         Configure the order and catalog projects to expose the cart and search,
         respectively, along with any additional configurations the projects may
         need. Then, add the two MFEs to the header.{" "}
       </Text>
       <List py="lg">
         <List.Item>
-          The cart can be placed in (path-to-cart-in-header)
+          The cart can be placed in{" "}
+          <Code>marketing/src/scenes/Header/components/Search/Search.tsx</Code>
         </List.Item>
         <List.Item>
-          The search can be placed in (path-to-search-in-header)
+          The search can be placed in{" "}
+          <Code>
+            marketing/src/scenes/Header/components/Shortcuts/Shortcuts.tsx
+          </Code>
         </List.Item>
       </List>
     </ExerciseLayout>

packages/workshop/src/scenes/Exercises/components/ConfiguringModuleFederation/ConfiguringModuleFederation.tsx

@@ -1,8 +1,7 @@
 import type { FC } from "react";
 
-import { Alert, Code, Flex, Image, Text } from "@mantine/core";
+import { Accordion, Code, Flex, Image, List, Text, Title } from "@mantine/core";
 import { CodeHighlight, CodeHighlightTabs } from "@mantine/code-highlight";
-import { IconInfoCircle } from "@tabler/icons-react";
 
 import ExerciseLayout from "../../shared/components/ExerciseLayout";
 
@@ -25,6 +24,24 @@ const reactLazy = `const LazilyImported = React.lazy(() => import(...))
   <LazilyImported />
 </Suspense>`;
 
+const shared = `
+ const shared = {
+        react: {
+          requiredVersion: "^18.2.0",
+          singleton: true,
+          eager: true,
+        },
+        "react-dom": {
+          requiredVersion: "^18.2.0",
+          singleton: true,
+          eager: true,
+        },
+        "react-router-dom": {
+          requiredVersion: "^6.23.1",
+          singleton: true,
+        },
+    }`;
+
 const ConfiguringModuleFederation: FC = () => {
   return (
     <ExerciseLayout
@@ -33,44 +50,76 @@ const ConfiguringModuleFederation: FC = () => {
       previous="../set-up"
     >
       <Text>Start by checking out this branch</Text>
-      <CodeHighlight my="lg" lang="sh" code="git checkout exercise-1" />
+      <CodeHighlight
+        my="lg"
+        lang="sh"
+        code="git checkout exercise/configuring-module-federation"
+      />
       <Text>
         Go ahead and do a little bit of poking around to get familiar with the
         project. Inside packages there are six projects (you can ignore workshop
         that's where all these exercises are located). The scenes folder inside
         of src contains all the MFEs we will use for our projects.
       </Text>
 
-      <Text pt="md">
+      <Title py="xl" order={2}>
+        Exercise
+      </Title>
+      <Text>
         Using module federation, pull the Header, Footer, Filter, and
-        CatalogList into the root of the shell application. Use the image below
-        as a guide, the layout for the page is provided.
+        CatalogList into the <Code>/shop</Code> section of the shell
+        application. The Header and Footer can be placed in the placeholders
+        inside <Code>shell/src/components/Layout</Code> and the Filter and
+        Catalog in <Code>shell/src/scenes/Shop</Code>.
       </Text>
-      <Flex my="lg" align="center" justify="center">
-        <Image w={500} src={diagram} />
-      </Flex>
-      <Text>
+
+      <Text pt="md">To accomplish this you'll need to:</Text>
+      <List py="lg">
+        <List.Item>
+          Create the types for the modules and namespaces for the projects and
+          MFEs
+        </List.Item>
+        <List.Item>
+          Update the types of the MFEs to be consumed (the Header, the Footer,
+          the Filter and the Catalog List)
+        </List.Item>
+        <List.Item>Expose the MFEs in their respective projects</List.Item>
+        <List.Item>Consume the MFEs in the shell application</List.Item>
+        <List.Item>Add any shared modules</List.Item>
+      </List>
+
+      <Text pt="md">
+        The Header and Footer can be found in the marketing project in their
+        respective scenes. Likewise, the Filter and Catalog in the catalog
+        project.
+      </Text>
+      <Text pt="md">
         Module Federation can be configured in the{" "}
         <Code>rsbuild.config.ts</Code> file
       </Text>
+
       <CodeHighlightTabs
         my="lg"
         code={[
           { fileName: "rsbuild.config.ts", language: "ts", code: buildConfig },
         ]}
       />
-
       <Text>
-        The Header and Footer can be found in the marketing project. As a
-        reminder, you can run a package command using{" "}
-        <Code>{`nx run <package>:<command>`}</Code>. The host and the remote
-        must be running for module federation to work.
+        Use the image below as a guide, the layout for the page is provided.
       </Text>
-      <Alert title="Quick Tip" icon={<IconInfoCircle />} my="xl">
-        Quick Tip: For those unfamiliar with React.lazy you must wrap the
-        components in a Suspense boundary.
-        <CodeHighlight my="lg" code={reactLazy} />
-      </Alert>
+      <Flex my="lg" align="center" justify="center">
+        <Image w={500} src={diagram} />
+      </Flex>
+      <Accordion>
+        <Accordion.Item value="hint">
+          <Accordion.Control>
+            Running into errors? Did you share the correct modules?
+          </Accordion.Control>
+          <Accordion.Panel>
+            <CodeHighlight code={shared} />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
     </ExerciseLayout>
   );
 };

packages/workshop/src/scenes/Exercises/components/FaultTolerance/FaultTolerance.tsx

@@ -45,33 +45,29 @@ const FaultTolerance: FC = () => {
       </Alert>
       <Text>
         If the Filter MFE goes down, our customers should still be able to shop
-        in the catalog, just in a limited capacity. If you want to see it in
-        action, throw an error in any component in an MFE.
+        in the catalog, just in a limited capacity.
       </Text>
       <Text pt="md">
         To remedy this, the shell application needs to wrap our MFEs in a
-        Suspense boundary and an error boundary. Rather than creating an error
+        suspense boundary and an error boundary. Rather than creating an error
         boundary from scratch, we will use{" "}
         <Anchor href="https://www.npmjs.com/package/react-error-boundary">
           react-error-boundary.
         </Anchor>
       </Text>
-      <Text>
-        You may continue from your work on Exercise 2, or check out a clean
-        branch using the command below.
-      </Text>
-      <CodeHighlight my="lg" lang="sh" code="git checkout exercise-3" />
-      <Text pt="md">
-        To install <Code>react-error-boundary</Code>.
+      <Text pt="lg">
+        You may continue from your work on the previous exercise, or check out a
+        clean branch using the command below.
       </Text>
-      <CodeHighlight my="lg" code="npm i react-error-boundary" />
+      <CodeHighlight my="lg" code="git checkout soln/sharing-common-modules" />
+
       <Text pt="md">
         To use <Code>react-error-boundary</Code>.
       </Text>
       <CodeHighlight my="lg" code={errorBoundary} />
       <Text>
         Add error boundaries to each of the MFEs the shell application is
-        currently using. The fallbacks can be as intricate or plain as you’d
+        currently using. The fallbacks can be as intricate or plain as you'd
         like - feel free to explore using Mantine to create more elaborate
         fallbacks.
       </Text>

packages/workshop/src/scenes/Exercises/components/GettingSetup/GettingSetup.tsx

@@ -16,10 +16,14 @@ const GettingSetup: FC = () => {
       </Text>
       <List py="lg">
         <List.Item>
-          <Anchor href="#">npm & node</Anchor>
+          <Anchor href="https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/">
+            npm & node
+          </Anchor>
         </List.Item>
         <List.Item>
-          <Anchor href="#">git</Anchor>
+          <Anchor href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">
+            git
+          </Anchor>
         </List.Item>
       </List>
       <Text>
@@ -28,19 +32,23 @@ const GettingSetup: FC = () => {
       <CodeHighlight my="lg" lang="sh" code="npm i -g nx" />
       <Text>
         The materials for this workshop are in the following GitHub{" "}
-        <Anchor href="">Repo</Anchor>.
+        <Anchor href="https://github.com/bitovi/enterprise-grade-micro-frontends">
+          Repo
+        </Anchor>
+        .
       </Text>
-      <Text>
-        Once cloned, checkout out the <Code>workshop/getting-started</Code>{" "}
-        branch and open the project in your IDE of choice - although this will
-        be written with vscode in mind - and install the project dependencies.
+      <Text pt="lg">
+        Once cloned, checkout out the <Code>main</Code> branch and open the
+        project in your IDE of choice - although this will be written with
+        vscode in mind - and install the project dependencies.
       </Text>
       <CodeHighlight my="lg" lang="sh" code="npm i" />
       <Text>Once installed, run the following command.</Text>
-      <CodeHighlight my="lg" lang="sh" code="npm run hello" />
+      <CodeHighlight my="lg" lang="sh" code="npm run start" />
       <Text>
-        you should see the application opened with a “Hello Attendee!” message.
-        Once you see the message you can go ahead and kill the dev server.
+        you should see the application opened with a “Hello - Nice to meet you!”
+        message. Once you see the message you can go ahead and kill the dev
+        server.
       </Text>
       <Title py="xl" order={2}>
         Nx
@@ -55,21 +63,25 @@ const GettingSetup: FC = () => {
       </Text>
       <CodeHighlight my="lg" code={`nx run <package-name>:<npm-script-name>`} />
       <Text>
-        Try running the dev command in the shell package. Look familiar? (You
-        should see “Hello Attendee”)
+        Try running the dev command in the <Code>workshop</Code> package and
+        navigate the the url. Look familiar? (You should see “Hello - Nice to
+        meet you!”)
       </Text>
       <Text pt="md">
         You can also run multiple project commands of the same name using
         run-many instead of run using the following pattern.
       </Text>
-      <CodeHighlight my="lg" code={`nx run-many -t <command>`} />
-      <Text>Try running the dev command with run-many</Text>
       <Alert title="A Quick Note on run-many" icon={<IconInfoCircle />} my="xl">
         run-many only runs three processes by default. To run more than three,
         you can add the parallel flag to run more than that{" "}
-        {`(--parallel=<number-you-want-to-run>)`}
+        <Code>{`--parallel=<number-you-want-to-run>`}</Code>
       </Alert>
-      <Text>If you got this far, congrats! You're all setup!</Text>
+      <CodeHighlight my="lg" code={`nx run-many -t <command>`} />
+      <Text>
+        Try running the dev command with run-many and parallel set to 6
+      </Text>
+
+      <Text pt="md">If you got this far, congrats! You're all setup!</Text>
     </ExerciseLayout>
   );
 };

packages/workshop/src/scenes/Exercises/components/SettingUpRoutes/SettingUpRoutes.tsx

@@ -1,6 +1,7 @@
 import type { FC } from "react";
 
 import { Code, List, Text, Title } from "@mantine/core";
+import { CodeHighlight } from "@mantine/code-highlight";
 
 import ExerciseLayout from "../../shared/components/ExerciseLayout";
 
@@ -11,6 +12,14 @@ const SettingUpRoutes: FC = () => {
       next="../exercise-6"
       previous="../exercise-3"
     >
+      <Text>
+        You may continue from your work on the previous exercise, or check out a
+        clean branch using the command below.
+      </Text>
+      <CodeHighlight
+        my="lg"
+        code="git checkout soln/adding-more-micro-frontends"
+      />
       <Text>
         We have several pages left to set up for our application. Let's take a
         moment to wire up the following MFEs with their respective routes. Each