@vercel/microfrontends 0.17.4 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -159
- package/dist/bin/cli.cjs +202 -139
- package/dist/config.cjs +103 -57
- package/dist/config.cjs.map +1 -1
- package/dist/config.d.ts +4 -4
- package/dist/config.js +103 -57
- package/dist/config.js.map +1 -1
- package/dist/{index-f094deb1.d.ts → index-09b1ddf9.d.ts} +16 -19
- package/dist/{index-5fcf0863.d.ts → index-2f78c0ca.d.ts} +44 -17
- package/dist/microfrontends/server.cjs +180 -133
- package/dist/microfrontends/server.cjs.map +1 -1
- package/dist/microfrontends/server.d.ts +4 -4
- package/dist/microfrontends/server.js +180 -133
- package/dist/microfrontends/server.js.map +1 -1
- package/dist/microfrontends.cjs +104 -58
- package/dist/microfrontends.cjs.map +1 -1
- package/dist/microfrontends.d.ts +4 -4
- package/dist/microfrontends.js +104 -58
- package/dist/microfrontends.js.map +1 -1
- package/dist/next/client.cjs +1 -1
- package/dist/next/client.cjs.map +1 -1
- package/dist/next/client.d.ts +1 -1
- package/dist/next/client.js +1 -1
- package/dist/next/client.js.map +1 -1
- package/dist/next/config.cjs +197 -145
- package/dist/next/config.cjs.map +1 -1
- package/dist/next/config.js +197 -145
- package/dist/next/config.js.map +1 -1
- package/dist/next/endpoints.d.ts +2 -2
- package/dist/next/middleware.cjs +121 -80
- package/dist/next/middleware.cjs.map +1 -1
- package/dist/next/middleware.js +121 -80
- package/dist/next/middleware.js.map +1 -1
- package/dist/next/testing.cjs +110 -63
- package/dist/next/testing.cjs.map +1 -1
- package/dist/next/testing.d.ts +4 -4
- package/dist/next/testing.js +110 -63
- package/dist/next/testing.js.map +1 -1
- package/dist/overrides.d.ts +3 -3
- package/dist/schema.d.ts +1 -1
- package/dist/{types-5900be7c.d.ts → types-4ef2bddb.d.ts} +1 -1
- package/dist/{types-ecd7b91b.d.ts → types-b6d38aea.d.ts} +1 -1
- package/dist/utils/mfe-port.cjs +181 -134
- package/dist/utils/mfe-port.cjs.map +1 -1
- package/dist/utils/mfe-port.js +181 -134
- package/dist/utils/mfe-port.js.map +1 -1
- package/dist/validation.cjs +74 -73
- package/dist/validation.cjs.map +1 -1
- package/dist/validation.d.ts +1 -1
- package/dist/validation.js +74 -73
- package/dist/validation.js.map +1 -1
- package/package.json +19 -3
- package/schema/schema.json +80 -73
package/README.md
CHANGED
|
@@ -1,161 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
### Define your `microfrontends.json` file
|
|
8
|
-
|
|
9
|
-
The first step to get started is to define your `microfrontends.json` file
|
|
10
|
-
listing all the microfrontends applications in your setup. This file should live at the root
|
|
11
|
-
of your default application.
|
|
12
|
-
|
|
13
|
-
For example, if your configuration is defined in `apps/dot-com`,
|
|
14
|
-
then you would define a `apps/dot-com/microfrontends.json` at the root.
|
|
15
|
-
|
|
16
|
-
> [!TIP]
|
|
17
|
-
> If you have a long configuration file, comments are supported by using the `.jsonc` extension.
|
|
18
|
-
|
|
19
|
-
```json filename="microfrontends.jsonc"
|
|
20
|
-
{
|
|
21
|
-
"$schema": "https://openapi.vercel.sh/microfrontends.json",
|
|
22
|
-
"applications": {
|
|
23
|
-
"dot-com": {
|
|
24
|
-
"vercel": {
|
|
25
|
-
"projectId": "prj_123"
|
|
26
|
-
},
|
|
27
|
-
"production": {
|
|
28
|
-
"host": "my-site.vercel.sh"
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
"docs": {
|
|
32
|
-
"vercel": {
|
|
33
|
-
"projectId": "prj_456"
|
|
34
|
-
},
|
|
35
|
-
"routing": [
|
|
36
|
-
{
|
|
37
|
-
"group": "all_pages",
|
|
38
|
-
"paths": ["/docs/:path*"]
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
|
-
"admin": {
|
|
43
|
-
"vercel": {
|
|
44
|
-
"projectId": "prj_789"
|
|
45
|
-
},
|
|
46
|
-
"routing": [
|
|
47
|
-
{
|
|
48
|
-
"group": "all_pages",
|
|
49
|
-
"paths": ["/admin/:path*"]
|
|
50
|
-
}
|
|
51
|
-
]
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### Set up Microfrontends in each Next.js application
|
|
58
|
-
|
|
59
|
-
#### `next.config.js`
|
|
60
|
-
|
|
61
|
-
In the `next.config.js` configuration for your application, wrap your config
|
|
62
|
-
with the `withMicrofrontends` function.
|
|
63
|
-
|
|
64
|
-
```js filename="next.config.ts"
|
|
65
|
-
import { withMicrofrontends } from '@vercel/microfrontends/next/config';
|
|
66
|
-
|
|
67
|
-
const nextConfig = {
|
|
68
|
-
// ...
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
export default withMicrofrontends(nextConfig);
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
This will set up the necessary environment variables and `rewrites` for the
|
|
75
|
-
application.
|
|
76
|
-
|
|
77
|
-
#### Middleware
|
|
78
|
-
|
|
79
|
-
Next you have to include the microfrontends middleware. You can run this code
|
|
80
|
-
in your middleware to apply the microfrontends routing logic.
|
|
81
|
-
|
|
82
|
-
```typescript filename="middleware.ts"
|
|
83
|
-
import { runMicrofrontendsMiddleware } from '@vercel/microfrontends/next/middleware';
|
|
84
|
-
|
|
85
|
-
export async function middleware(
|
|
86
|
-
request: NextRequest,
|
|
87
|
-
event: NextFetchEvent,
|
|
88
|
-
): Promise<Response> {
|
|
89
|
-
let response = await runMicrofrontendsMiddleware({ request });
|
|
90
|
-
if (response) {
|
|
91
|
-
return response;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
```
|
|
1
|
+
<picture>
|
|
2
|
+
<source srcset="../../assets/mfe-banner-dark.png" media="(prefers-color-scheme: dark)">
|
|
3
|
+
<source srcset="../../assets/mfe-banner-light.png" media="(prefers-color-scheme: light)">
|
|
4
|
+
<img src="../../assets/mfe-banner-light.png" alt="hero banner">
|
|
5
|
+
</picture>
|
|
95
6
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
The Micro-Frontends features rely on information exposed in `.well-known`
|
|
99
|
-
endpoints:
|
|
100
|
-
|
|
101
|
-
- `/.well-known/vercel/microfrontends/client-config`
|
|
102
|
-
|
|
103
|
-
You must define API handlers for these two routes to serve the information to
|
|
104
|
-
the client and Vercel Toolbar for Micro-Frontends features to work.
|
|
105
|
-
|
|
106
|
-
If you are using App Router, add a file under the `app/.well-known/vercel/microfrontends/client-config/route.ts` file:
|
|
107
|
-
|
|
108
|
-
```typescript filename="app/.well-known/vercel/micrfrontends/client-config/route.ts"
|
|
109
|
-
import { wellKnownNextjsClientConfigAppRoute } from '@vercel/microfrontends/next/endpoints';
|
|
110
|
-
|
|
111
|
-
export async function GET(): Promise<Response> {
|
|
112
|
-
return wellKnownNextjsClientConfigAppRoute();
|
|
113
|
-
}
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
#### Client-side link navigation and prefetching
|
|
117
|
-
|
|
118
|
-
Lastly, to correctly navigate between micro-frontends and prefetch content, you
|
|
119
|
-
can use client components provided by this package.
|
|
120
|
-
|
|
121
|
-
##### Set up prefetching in the root layout
|
|
122
|
-
|
|
123
|
-
In the root layout of your application, add the `<PrefetchCrossZoneLinks />`
|
|
124
|
-
element. This element will prefetch any cross-zone links to minimize the
|
|
125
|
-
performance impact of hard navigations.
|
|
126
|
-
|
|
127
|
-
```typescript filename="app/layout.tsx"
|
|
128
|
-
export default function RootLayout({
|
|
129
|
-
children,
|
|
130
|
-
}: {
|
|
131
|
-
children: React.ReactNode;
|
|
132
|
-
}): JSX.Element {
|
|
133
|
-
return (
|
|
134
|
-
<html>
|
|
135
|
-
// ...
|
|
136
|
-
<body>
|
|
137
|
-
// ...
|
|
138
|
-
<PrefetchCrossZoneLinks />
|
|
139
|
-
</body>
|
|
140
|
-
</html>
|
|
141
|
-
);
|
|
142
|
-
}
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
Then, use the `Link` component from `@vercel/microfrontends/next/client`
|
|
146
|
-
any place that you would otherwise use the `next/link` package.
|
|
147
|
-
|
|
148
|
-
## Contributing
|
|
149
|
-
|
|
150
|
-
### Unit Tests
|
|
151
|
-
|
|
152
|
-
```bash
|
|
153
|
-
cd packages/microfrontends
|
|
154
|
-
pnpm unit-tests
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
### Integration Tests
|
|
158
|
-
|
|
159
|
-
There is an [example application](../../apps/microfrontends-example-web) that has integration tests with Playwright.
|
|
7
|
+
# `@vercel/microfrontends`
|
|
160
8
|
|
|
161
|
-
|
|
9
|
+
[Learn more in the documentation](https://vercel.com/docs/microfrontends)
|