Multitenant testing

micro-FE/packages/multi-tenant-01/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

micro-FE/packages/multi-tenant-01/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

micro-FE/packages/multi-tenant-01/config/client.ts

@@ -0,0 +1,8 @@
+import { GraphQLClient } from "graphql-request";
+
+const hygraphContentApi =
+  "https://api-ap-northeast-1.hygraph.com/v2/clbdh25vy1rlo01ujgtr649sr/master";
+
+const client = new GraphQLClient(hygraphContentApi);
+
+export default client;

micro-FE/packages/multi-tenant-01/graphql/queries.ts

@@ -0,0 +1,33 @@
+import { gql } from "graphql-request";
+
+export const GetAppsDocument = gql`
+  query Apps {
+    apps {
+      id
+      name
+      description
+      slug
+      cover {
+        url
+        width
+        height
+      }
+    }
+  }
+`;
+
+export const GetAppDocument = gql`
+  query App($slug: String!) {
+    app(where: { slug: $slug }, stage: PUBLISHED, locales: [en]) {
+      id
+      name
+      description
+      slug
+      cover {
+        url
+        width
+        height
+      }
+    }
+  }
+`;

micro-FE/packages/multi-tenant-01/middleware.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const config = {
+  matcher: ["/((?!api|_next|[\\w-]+\\.\\w+).*)"],
+};
+
+export function middleware(req: NextRequest) {
+  const url = req.nextUrl;
+  const hostname = req.headers.get("host") ?? "localhost:4200";
+
+  if (hostname === "localhost:4200") {
+    url.pathname = `/home${url.pathname}`;
+
+    return NextResponse.rewrite(url);
+  }
+
+  const currentHost = hostname.replace(".localhost:4200", "");
+  url.pathname = `/$apps/${currentHost}${url.pathname}`;
+  return NextResponse.rewrite(url);
+}

micro-FE/packages/multi-tenant-01/next.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+
+const { NextFederationPlugin } = require("@module-federation/nextjs-mf");
+
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: false,
+  swcMinify: false,
+  images: {
+    domains: ["media.graphassets.com"],
+  },
+  webpack(config, { isServer }) {
+    if (isServer) {
+      config.resolve.fallback = {
+        fs: false,
+      };
+    }
+
+    config.plugins.push(
+      new NextFederationPlugin({
+        name: "host",
+        remotes: {
+          remote: "remote@http://localhost:4201/remote-entry.js",
+        },
+        filename: "static/chunks/remote-entry.js",
+        extraOptions: {},
+      }),
+    );
+
+    return config;
+  },
+};

micro-FE/packages/multi-tenant-01/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "multi-tenant-01",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -- -p 4200",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@module-federation/nextjs-mf": "^5.12.9"
+  }
+}

micro-FE/packages/multi-tenant-01/pages/$apps/[slug].tsx

@@ -0,0 +1,51 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import * as React from "react";
+import client from "../../config/client";
+import { GetAppDocument } from "../../graphql/queries";
+import IApp from "../../types/app";
+
+type Props = {
+  data: IApp;
+};
+
+type Params = {
+  slug: string;
+};
+
+export const getServerSideProps: GetServerSideProps<Props, Params> = async ({ params }) => {
+  const { slug } = Object.assign({ slug: "" }, params);
+
+  const { app: data } = await client.request<{ app: IApp }, Params>(GetAppDocument, { slug });
+
+  if (!data) return { notFound: true };
+
+  return { props: { data } };
+};
+
+export default function AppPage({ data }: Props) {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    import("remote/index").then((mod) => {
+      if (ref.current) {
+        new mod.default({
+          target: ref.current,
+          props: { data },
+        });
+      }
+    });
+  }, [data]);
+
+  return (
+    <>
+      <Head>
+        <title>{data.name}</title>
+
+        {/* <!-- (seo) meta, jsonld, etc... --> */}
+      </Head>
+
+      <div ref={ref} />
+    </>
+  );
+}

micro-FE/packages/multi-tenant-01/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from "next/app";
+import "../styles/globals.css";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

micro-FE/packages/multi-tenant-01/pages/_document.tsx

@@ -0,0 +1,35 @@
+import { revalidate } from "@module-federation/nextjs-mf/utils";
+import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+
+    ctx?.res?.on("finish", () => {
+      revalidate();
+    });
+
+    return initialProps;
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&family=Source+Serif+Pro:wght@400;600;700;900&display=swap"
+          />
+        </Head>
+
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

micro-FE/packages/multi-tenant-01/pages/home/index.tsx

@@ -0,0 +1,72 @@
+import { GetServerSideProps } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import client from "../../config/client";
+import { GetAppsDocument } from "../../graphql/queries";
+import styles from "../../styles/home.module.css";
+import IApp from "../../types/app";
+
+type Props = {
+  data: IApp[];
+};
+
+export const getServerSideProps: GetServerSideProps<Props> = async () => {
+  const { apps: data } = await client.request<{ apps: IApp[] }>(GetAppsDocument);
+
+  return { props: { data } };
+};
+
+export default function AppsPage({ data }: Props) {
+  return (
+    <>
+      <Head>
+        <title>Apps</title>
+      </Head>
+
+      <div className={styles.container}>
+        <div className={styles.title}>
+          <h1>Apps</h1>
+          <div className={styles.badge}>{data.length}</div>
+        </div>
+
+        <div className={styles.listWrapper}>
+          <ul className={styles.list}>
+            {data.map(({ id, name, cover, description, slug }) => (
+              <li className={styles.listItem} key={id}>
+                <div className={styles.listItemImage}>
+                  <Image
+                    src={cover.url}
+                    alt={name}
+                    width={cover.width}
+                    height={cover.height}
+                    draggable={false}
+                  />
+                </div>
+
+                <h2>{name}</h2>
+                <p>{description}</p>
+
+                <a href={`http://${slug}.localhost:4200`} target="_blank" rel="noreferrer">
+                  Go to website
+                  <ArrowNarrowRight />
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ArrowNarrowRight(props: React.ComponentProps<"svg">) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

micro-FE/packages/multi-tenant-01/remote.d.ts

@@ -0,0 +1,4 @@
+declare module "remote/*" {
+  const Component: any;
+  export default any;
+}

micro-FE/packages/multi-tenant-01/styles/globals.css

@@ -0,0 +1,40 @@
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  background-color: white;
+  color: #171717;
+  scroll-behavior: smooth;
+}
+
+input,
+select,
+textarea,
+button {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+}
+
+ol,
+ul {
+  list-style: none;
+}