Skip to content

Commit 493eef7

Browse files
swalker326swalker326
authored
Added turbo repo example with module federation (#55)
* feat(create-turbo): install dependencies * added history fallback to host config * feat(create-turbo): added turbo example * chore: updated readme
1 parent 1357d2d commit 493eef7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+7897
-1
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ Once you've forked this repository, you can clone it and follow the instructions
2828
A monorepo using pnpm workspace, Module Federation, React, and Vite as the bundler
2929
* __[`react-vite-nx`](./examples/react-vite-nx)__
3030
A monorepo using Nx, React, and Vite as the bundler
31-
* __[`react-vite-ts`](./examples/react-vite-ts)__
31+
* __[`turbo-rspack-mf`](./examples/turbo-rspack-mf/)__
32+
A monorepo using Turborepo, React, and Rspack as the bundler
33+
*`` __[`react-vite-ts`](./examples/react-vite-ts)__
3234
A React application built in TypeScript, using Vite as the bundler.
3335
* __[`rspack-project`](./examples/rspack-project)__
3436
A simple Rspack application using React.

‎examples/turbo-rspack-mf/.gitignore

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# Dependencies
4+
node_modules
5+
.pnp
6+
.pnp.js
7+
8+
# Local env files
9+
.env
10+
.env.local
11+
.env.development.local
12+
.env.test.local
13+
.env.production.local
14+
15+
# Testing
16+
coverage
17+
18+
# Turbo
19+
.turbo
20+
21+
# Vercel
22+
.vercel
23+
24+
# Build Outputs
25+
.next/
26+
out/
27+
build
28+
dist
29+
30+
31+
# Debug
32+
npm-debug.log*
33+
yarn-debug.log*
34+
yarn-error.log*
35+
36+
# Misc
37+
.DS_Store
38+
*.pem

‎examples/turbo-rspack-mf/.npmrc

Whitespace-only changes.

‎examples/turbo-rspack-mf/.vscode/settings.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"eslint.workingDirectories": [
3+
{
4+
"mode": "auto"
5+
}
6+
]
7+
}

‎examples/turbo-rspack-mf/README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Zephyr Cloud Starter
2+
3+
This is an official starter for Zephyr Cloud.
4+
5+
## Using this example
6+
7+
Run the following command:
8+
9+
```sh
10+
npx create-turbo@latest --example https://github.com/swalker326/ze-starter-turbo
11+
```
12+
## Running this example
13+
For zephyr, a couple things have to happen,
14+
- Publish the project to github (or any other git provider)
15+
- Public or private, we just care about the git history
16+
- The remote applications need to be built first, which is handled by turbo so all you have to do is:
17+
``` bash
18+
turbo run build
19+
```
20+
21+
22+
## What's inside?
23+
24+
This Turborepo includes the following packages/apps:
25+
26+
### Apps and Packages
27+
28+
Rspack Applications
29+
- `host`: An rspack application and also the host app
30+
- `home`: Another rspack application with module federation setup being consumed by the host
31+
- `settings`: A final rspack application used to highlight the routing (react router)
32+
- `@repo/tailwind-config`: global `tailwind` configurations
33+
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
34+
35+
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
36+
37+
### Utilities
38+
39+
This Turborepo has some additional tools already setup for you:
40+
41+
- [TypeScript](https://www.typescriptlang.org/) for static type checking
42+
- [Biomejs](https://biomejs.dev/guides/getting-started/) for formatting and linting
43+
44+
### Build
45+
46+
To build all apps and packages, run the following command:
47+
48+
```
49+
cd my-turborepo
50+
pnpm build
51+
```
52+
53+
### Develop
54+
55+
To develop all apps and packages, run the following command:
56+
57+
```
58+
cd my-turborepo
59+
pnpm dev
60+
```
61+
62+
### Remote Caching
63+
64+
Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
65+
66+
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
67+
68+
```
69+
cd my-turborepo
70+
npx turbo login
71+
```
72+
73+
This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
74+
75+
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
76+
77+
```
78+
npx turbo link
79+
```
80+
81+
## Useful Links
82+
83+
Learn more about the power of Turborepo:
84+
85+
- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
86+
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
87+
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
88+
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
89+
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
90+
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)

‎examples/turbo-rspack-mf/apps/home/.gitignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Local
2+
.DS_Store
3+
*.local
4+
*.log*
5+
6+
# Dist
7+
node_modules
8+
dist/
9+
10+
# IDE
11+
.vscode/*
12+
!.vscode/extensions.json
13+
.idea

‎examples/turbo-rspack-mf/apps/home/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Rspack Project
2+
3+
## Setup
4+
5+
Install the dependencies:
6+
7+
```bash
8+
npm install
9+
```
10+
11+
## Get Started
12+
13+
Start the dev server:
14+
15+
```bash
16+
npm run dev
17+
```
18+
19+
Build the app for production:
20+
21+
```bash
22+
npm run build
23+
```

‎examples/turbo-rspack-mf/apps/home/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/react.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Rspack + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎examples/turbo-rspack-mf/apps/home/module-federation.config.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { ModuleFederationPluginOptions } from "@rspack/core";
2+
3+
export const mfConfig: ModuleFederationPluginOptions = {
4+
name: "home",
5+
filename: "remoteEntry.js",
6+
exposes: {
7+
"./RemoteEntry": "./src/RemoteEntry.tsx"
8+
},
9+
remotes: {
10+
host: "host@http://localhost:3000/remoteEntry.js"
11+
},
12+
shared: ["react", "react-dom", "react-router"]
13+
};

‎examples/turbo-rspack-mf/apps/home/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "home",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"build": "cross-env NODE_ENV=production rspack build",
7+
"check": "biome check --write",
8+
"dev": "cross-env NODE_ENV=development rspack serve",
9+
"format": "biome format --write"
10+
},
11+
"dependencies": {
12+
"@repo/tailwind-config": "workspace:^",
13+
"@repo/typescript-config": "workspace:^",
14+
"autoprefixer": "^10.4.20",
15+
"lucide-react": "^0.460.0",
16+
"postcss": "^8.4.49",
17+
"postcss-loader": "^8.1.1",
18+
"react": "^18.2.0",
19+
"react-dom": "^18.2.0",
20+
"react-router": "^7.0.1",
21+
"tailwindcss": "^3.4.1",
22+
"zephyr-rspack-plugin": "0.0.30"
23+
},
24+
"devDependencies": {
25+
"@rspack/cli": "^1.1.3",
26+
"@rspack/core": "^1.1.3",
27+
"@rspack/plugin-react-refresh": "1.0.0",
28+
"@types/react": "^18.2.48",
29+
"@types/react-dom": "^18.2.18",
30+
"cross-env": "^7.0.3",
31+
"react-refresh": "^0.14.0",
32+
"ts-node": "^10.9.2",
33+
"typescript": "^5.6.3"
34+
}
35+
}

‎examples/turbo-rspack-mf/apps/home/postcss.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/turbo-rspack-mf/apps/home/rspack.config.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { rspack } from "@rspack/core";
2+
import * as RefreshPlugin from "@rspack/plugin-react-refresh";
3+
import { withZephyr } from "zephyr-rspack-plugin";
4+
import { mfConfig } from "./module-federation.config";
5+
6+
const isDev = process.env.NODE_ENV === "development";
7+
8+
// Target browsers, see: https://github.com/browserslist/browserslist
9+
const targets = ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 14"];
10+
11+
export default withZephyr()({
12+
context: __dirname,
13+
devServer: {
14+
port: 3001,
15+
historyApiFallback: true,
16+
},
17+
entry: {
18+
main: "./src/main.tsx"
19+
},
20+
resolve: {
21+
extensions: ["...", ".ts", ".tsx", ".jsx"]
22+
},
23+
module: {
24+
rules: [
25+
{
26+
test: /\.css$/,
27+
use: ["postcss-loader"],
28+
type: "css"
29+
},
30+
{
31+
test: /\.svg$/,
32+
type: "asset"
33+
},
34+
{
35+
test: /\.(jsx?|tsx?)$/,
36+
use: [
37+
{
38+
loader: "builtin:swc-loader",
39+
options: {
40+
jsc: {
41+
parser: {
42+
syntax: "typescript",
43+
tsx: true
44+
},
45+
transform: {
46+
react: {
47+
runtime: "automatic",
48+
development: isDev,
49+
refresh: isDev
50+
}
51+
}
52+
},
53+
env: { targets }
54+
}
55+
}
56+
]
57+
}
58+
]
59+
},
60+
plugins: [
61+
new rspack.HtmlRspackPlugin({
62+
template: "./index.html"
63+
}),
64+
isDev ? new RefreshPlugin() : null,
65+
new rspack.container.ModuleFederationPlugin(mfConfig)
66+
].filter(Boolean),
67+
optimization: {
68+
minimizer: [
69+
new rspack.SwcJsMinimizerRspackPlugin(),
70+
new rspack.LightningCssMinimizerRspackPlugin({
71+
minimizerOptions: { targets }
72+
})
73+
]
74+
},
75+
experiments: {
76+
css: true
77+
}
78+
});

‎examples/turbo-rspack-mf/apps/home/src/App.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a > .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

0 commit comments

Comments
 (0)