Cross Imports

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   },
   moduleNameMapper: {
     "\\.(css)$": "identity-obj-proxy",
+    "\\.svg$": "<rootDir>/__mocks__/fileMock.js",
   },
   setupFilesAfterEnv: [
     "../node_modules/@testing-library/jest-dom/dist/index.js",

package.json

@@ -30,6 +30,7 @@
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-react-important-stuff": "^2.0.0",
     "eslint-plugin-prettier": "^3.1.1",
+    "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.2.7",
     "jest-cli": "^25.2.7",
@@ -47,6 +48,7 @@
     "@reach/router": "^1.3.4",
     "express": "^4.17.1",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-use": "^15.3.4"
   }
 }

src/__mocks__/@topcoder/micro-frontends-navbar-app.js

@@ -0,0 +1,7 @@
+module.exports = {
+  login: () => {},
+  logout: () => {},
+  setAppMenu: () => {},
+  getAuthUserTokens: () => new Promise(() => {}),
+  getAuthUserProfile: () => new Promise(() => {}),
+};

src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "";

src/components/AuthDemo/index.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { useAsync } from "react-use";
+import {
+  login,
+  logout,
+  getAuthUserTokens,
+  getAuthUserProfile,
+} from "@topcoder/micro-frontends-navbar-app";
+
+const Profile = ({ authUserProfile }) => (
+  <>
+    <h3>User Profile</h3>
+    {authUserProfile.loading ? (
+      <div>User Profile Loading...</div>
+    ) : authUserProfile.error ? (
+      <div>Profile Loading Error: {authUserProfile.error.message}</div>
+    ) : (
+      <ul>
+        <li>
+          <strong>Handle: </strong> {authUserProfile.value.handle}
+        </li>
+        <li>
+          <strong>First Name: </strong> {authUserProfile.value.firstName}
+        </li>
+        <li>
+          <strong>Last Name: </strong> {authUserProfile.value.lastName}
+        </li>
+      </ul>
+    )}
+  </>
+);
+
+const AuthDemo = () => {
+  // see how the `useAsync` hook works here https://github.com/streamich/react-use/blob/master/docs/useAsync.md
+  const authUserTokens = useAsync(getAuthUserTokens);
+  const authUserProfile = useAsync(getAuthUserProfile);
+
+  return (
+    <>
+      <h2>Authentication</h2>
+      {authUserTokens.loading ? (
+        <div>Authentication...</div>
+      ) : authUserTokens.error ? (
+        <div>Authentication Error: {authUserTokens.error.message}</div>
+      ) : (
+        <div>
+          {authUserTokens.value.tokenV3 ? (
+            <div>
+              User is logged-in <button onClick={logout}>Logout</button>
+              <Profile authUserProfile={authUserProfile} />
+            </div>
+          ) : (
+            <>
+              User is logged-out <button onClick={login}>Login</button>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AuthDemo;

src/constants/appMenu.js

@@ -0,0 +1,24 @@
+/**
+ * React app side menu structure
+ */
+import reactIcon from "../assets/images/react-grey.svg";
+import reactActiveIcon from "../assets/images/react-green.svg";
+import homeIcon from "../assets/images/home.svg";
+import homeActiveIcon from "../assets/images/home-green.svg";
+
+const appMenu = [
+  {
+    title: "React App",
+    path: "/micro-frontends-react-route",
+    icon: reactIcon,
+    activeIcon: reactActiveIcon,
+  },
+  {
+    title: "Home",
+    path: "/micro-frontends-react-route/home",
+    icon: homeIcon,
+    activeIcon: homeActiveIcon,
+  },
+];
+
+export default appMenu;

src/root.component.js

@@ -1,7 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Link } from "@reach/router";
+import { setAppMenu } from "@topcoder/micro-frontends-navbar-app";
+import appMenu from "./constants/appMenu";
+import AuthDemo from "./components/AuthDemo";
+
+export default function Root() {
+  useEffect(() => {
+    // when app starts it should set its side menu structure
+    setAppMenu("/micro-frontends-react-route", appMenu);
+  }, []);
 
-export default function Root(props) {
   return (
     <div style={{ textAlign: "center" }}>
       <h1>React child app example</h1>
@@ -19,8 +27,12 @@ export default function Root(props) {
       </svg>
 
       <div>
-        <Link to="/micro-frontends-angular-route">Link to Angular child app</Link>
+        <Link to="/micro-frontends-angular-route">
+          Link to Angular child app
+        </Link>
       </div>
+
+      <AuthDemo />
     </div>
   );
 }

webpack.config.js

@@ -1,3 +1,5 @@
+/* global __dirname */
+
 const webpackMerge = require("webpack-merge");
 const singleSpaDefaults = require("webpack-config-single-spa-react");
 
@@ -8,7 +10,24 @@ module.exports = (webpackConfigEnv) => {
     webpackConfigEnv,
   });
 
+  // modify the webpack config however you'd like to by adding to this object
   return webpackMerge.smart(defaultConfig, {
-    // modify the webpack config however you'd like to by adding to this object
+    // we have to list here all the microapps which we would like to use in imports
+    // so webpack doesn't tries to import them
+    externals: {
+      "@topcoder/micro-frontends-navbar-app":
+        "@topcoder/micro-frontends-navbar-app",
+    },
+    module: {
+      rules: [
+        {
+          test: /\.svg$/,
+          exclude: /node_modules/,
+          use: {
+            loader: require.resolve("file-loader", { paths: [__dirname] }),
+          },
+        },
+      ],
+    },
   });
 };