AliIybar: Created page with "Category:Bookitforme Category:vite Category:React == Create the apps ==

 bun create vite host --template react-ts bun create vite client-a --template react-t..."

2026-03-10T11:32:47Z

Created page with "Category:Bookitforme Category:vite Category:React == Create the apps == <pre> bun create vite host --template react-ts bun create vite client-a --template react-t..."

New page

[[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

Module federation with vite - Revision history

AliIybar: Created page with "Category:Bookitforme Category:vite Category:React == Create the apps ==
bun create vite host --template react-ts bun create vite client-a --template react-t..."