View source for Module federation with vite

[[Category:Bookitforme]]
[[Category:vite]]
[[Category:React]]

== Create the apps ==
<pre>
bun create vite host --template react-ts
bun create vite client-a --template react-ts
bun create vite client-b --template react-ts
</pre>
Add vite-plugin-federations
<pre>
cd host
bun add -d @originjs/vite-plugin-federation

cd ../client-a
bun add -d @originjs/vite-plugin-federation

cd ../client-b
bun add -d @originjs/vite-plugin-federation
</pre>
== Remote App (client-a) ==
client-a/vite.config.ts
<pre>
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "client_a",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    target: "esnext",
    minify: false,
  },
  server: {
    port: 5001,
  },
})
</pre>
client-a/src/Button.tsx
<pre>
export default function Button() {
  return (
    <button style={{ padding: 10 }}>
      Client A Button
    </button>
  )
}
</pre>
client-a/src/main.tsx
<pre>
import React from "react"
import ReactDOM from "react-dom/client"

function App() {
  return <h2>Client A running</h2>
}

ReactDOM.createRoot(document.getElementById("root")!).render(<App />)
</pre>
== Remote App (client-b) ==
client-b/vite.config.ts
<pre>
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "client_b",
      filename: "remoteEntry.js",
      exposes: {
        "./Card": "./src/Card.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    target: "esnext",
    minify: false,
  },
  server: {
    port: 5002,
  },
})
</pre>
client-b/src/Card.tsx
<pre>
export default function Card() {
  return (
    <div style={{ border: "1px solid black", padding: 10 }}>
      Client B Card
    </div>
  )
}
</pre>
== Host App ==
host/vite.config.ts
<pre>
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host",
      remotes: {
        client_a: "http://localhost:5001/assets/remoteEntry.js",
        client_b: "http://localhost:5002/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  server: {
    port: 5000,
  },
})
</pre>
=== Host React App ===
host/src/App.tsx
<pre>
import React, { Suspense } from "react"

const RemoteButton = React.lazy(() => import("client_a/Button"))
const RemoteCard = React.lazy(() => import("client_b/Card"))

export default function App() {
  return (
    <div>
      <h1>Host App</h1>

      <Suspense fallback="Loading Button...">
        <RemoteButton />
      </Suspense>

      <Suspense fallback="Loading Card...">
        <RemoteCard />
      </Suspense>
    </div>
  )
}
</pre>

== TypeScript Declarations (Important) ==
host/src/remote.d.ts
<pre>
declare module "client_a/Button"
declare module "client_b/Card"
</pre>
Without this, TypeScript complains.
== Run Everything with Bun ==
terminal 1
 cd client-a
 bun run dev
terminal 2
 cd client-b
 bun run dev
terminal 3
 cd host
 bun run dev