Merge pull request #1 from strenuus/mf

Add module federation plugin

.dockerignore

@@ -0,0 +1,27 @@
+.DS_Store
+.bin
+.git
+.gitignore
+.gitattributes
+.bundleignore
+.bundle
+.byebug_history
+.rspec
+.cache
+public
+tmp
+log
+test
+node_modules
+node_modules/
+yarn-error.log
+coverage/
+db_data/
+docker/
+docker-compose.yml
+*.vim
+.env
+.env.*
+.nvmrc
+.tool-versions
+.envrc

config/federation.js

@@ -0,0 +1,24 @@
+// @ts-check
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { dependencies: deps } = require("../package.json")
+
+const hostUrl = new URL(
+  "packs/remoteEntry.js",
+  process.env.HOST_CONTAINER_URL || "http://network360-webpacker-1:3035"
+)
+
+/** @satisfies {import("@module-federation/typescript/src/types").ModuleFederationPluginOptions} */
+const config = {
+  name: "cms",
+  filename: "remoteEntry.js",
+  remotes: {
+    host: `host@${hostUrl}`,
+  },
+  shared: {
+    ...deps,
+    react: { singleton: true, requiredVersion: deps.react },
+    "react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
+  },
+}
+
+module.exports = config

config/webpack.config.js

@@ -0,0 +1,36 @@
+// @ts-check
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+const path = require("path")
+const { ModuleFederationPlugin } = require("webpack").container
+const federationConfig = require("./federation")
+
+/** @typedef {import("webpack").Configuration} Configuration */
+/** @satisfies {Configuration} */
+const config = {
+  entry: {},
+  output: {
+    path: path.resolve(__dirname, "./public"),
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json", ".wasm"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|tsx?)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "ts-loader",
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: "./public/index.html" }),
+    new ModuleFederationPlugin({
+      ...federationConfig,
+    }),
+  ],
+}
+
+module.exports = config

content/pages/faq.yml

@@ -0,0 +1,11 @@
+title: FAQ
+description: Frequently asked questions
+subtopics:
+  - subtopic: general
+    questions:
+      - question: How do I edit my profile picture?
+        answer: You can't, haha!
+  - subtopic: modules
+    questions:
+      - question: Module A
+        answer: Answer about Module A

docker-compose.yml

@@ -0,0 +1,38 @@
+version: "3"
+services:
+  web:
+    build:
+      context: .
+      dockerfile: docker/Dockerfile
+      target: web
+    command: npx gatsby develop -H 0.0.0.0
+    ports:
+      - "8000:8000"
+    networks:
+      zna-mf:
+        aliases:
+          - network360.local
+          - cms.network360.local
+    healthcheck:
+      test: curl --fail localhost:8000/admin/config.yml || exit 1
+      interval: 30s
+      timeout: 5s
+      retries: 10
+    restart: on-failure
+
+  proxy:
+    build:
+      context: .
+      dockerfile: docker/Dockerfile
+      target: proxy
+    command: npx decap-server
+    ports:
+      - "8081:8081"
+    networks:
+      zna-mf: {}
+    restart: on-failure
+
+networks:
+  zna-mf:
+    name: zna-mf
+    external: true

docker/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20 AS build
+WORKDIR /app
+COPY package*.json .
+RUN npm install
+COPY . .
+
+FROM build AS web
+EXPOSE 8000
+
+FROM build AS proxy
+EXPOSE 8081

gatsby-config.js

@@ -1,8 +1,20 @@
-module.exports = {
+// @ts-check
+const federationConfig = require("./config/federation")
+const createSearchIndexPlugin = require("./plugins/cms-content-plugin")
+
+/** @satisfies {import('gatsby').GatsbyConfig} */
+const config = {
   siteMetadata: {
     title: `Network360 CMS`,
   },
   plugins: [
+    {
+      resolve: "gatsby-plugin-federation",
+      options: {
+        ssr: false,
+        federationConfig,
+      },
+    },
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -11,13 +23,21 @@ module.exports = {
         path: `${__dirname}/content/blog`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `pages`,
+        path: `${__dirname}/content/pages`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `images`,
         path: `${__dirname}/src/images`,
       },
     },
+    `gatsby-transformer-yaml`,
     {
       resolve: `gatsby-transformer-remark`,
       options: {
@@ -43,5 +63,10 @@ module.exports = {
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-netlify-cms`,
+    `cms-content-plugin`,
+    // TODO: this probably isn't legal, but you'll never catch me alive, coppah!
+    createSearchIndexPlugin(),
   ],
 }
+
+module.exports = config

gatsby-node.js

@@ -1,63 +1,20 @@
-const path = require(`path`)
-const { createFilePath } = require(`gatsby-source-filesystem`)
-
-exports.createPages = async ({ graphql, actions, reporter }) => {
-  const { createPage } = actions
-
-  // Define a template for blog post
-  const blogPost = path.resolve(`./src/templates/blog-post.js`)
-
-  // Get all markdown blog posts sorted by date
-  const result = await graphql(
-    `
-      {
-        allMarkdownRemark(
-          sort: { fields: [frontmatter___date], order: ASC }
-          limit: 1000
-        ) {
-          nodes {
-            id
-            fields {
-              slug
-            }
-          }
-        }
-      }
-    `
-  )
-
-  if (result.errors) {
-    reporter.panicOnBuild(
-      `There was an error loading your blog posts`,
-      result.errors
-    )
-    return
-  }
-
-  const posts = result.data.allMarkdownRemark.nodes
-
-  // Create blog posts pages
-  // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
-  // `context` is available in the template as a prop and as a variable in GraphQL
+// @ts-check
 
-  if (posts.length > 0) {
-    posts.forEach((post, index) => {
-      const previousPostId = index === 0 ? null : posts[index - 1].id
-      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id
-
-      createPage({
-        path: post.fields.slug,
-        component: blogPost,
-        context: {
-          id: post.id,
-          previousPostId,
-          nextPostId,
-        },
-      })
+const { ModuleFederationPlugin } = require("webpack").container
+const { createFilePath } = require(`gatsby-source-filesystem`)
+const federationConfig = require("./config/federation")
+
+/** @param {import("gatsby").CreateWebpackConfigArgs} args */
+exports.onCreateWebpackConfig = ({ stage, actions }) => {
+  const { setWebpackConfig } = actions
+  if (stage === "build-html" || stage === "develop-html") {
+    setWebpackConfig({
+      plugins: [new ModuleFederationPlugin(federationConfig)],
     })
   }
 }
 
+/** @param {import("gatsby").CreateNodeArgs} args */
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
 
@@ -72,6 +29,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   }
 }
 
+/** @param {import("gatsby").CreateSchemaCustomizationArgs} args */
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions