@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.9 → 3.2.0-ultramodern.91
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/docs/en/apis/app/commands.mdx +32 -32
- package/docs/en/community/blog/2022-0708-updates.md +1 -1
- package/docs/en/community/blog/2022-0910-updates.md +2 -2
- package/docs/en/community/blog/v2-release-note.mdx +5 -5
- package/docs/en/community/blog/v3-release-note.mdx +1 -1
- package/docs/en/community/contributing-guide.mdx +2 -3
- package/docs/en/community/releases.mdx +2 -2
- package/docs/en/components/build-output.mdx +1 -1
- package/docs/en/components/debug-app.mdx +1 -1
- package/docs/en/components/deploy-command.mdx +3 -3
- package/docs/en/components/init-app.mdx +38 -36
- package/docs/en/components/init-rspack-app.mdx +1 -1
- package/docs/en/components/prerequisites.mdx +1 -2
- package/docs/en/components/serve-command.mdx +3 -3
- package/docs/en/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/en/configure/app/usage.mdx +6 -6
- package/docs/en/guides/advanced-features/international/api.mdx +4 -1
- package/docs/en/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/en/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/en/guides/advanced-features/international/routing.mdx +43 -2
- package/docs/en/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/en/guides/basic-features/deploy.mdx +14 -14
- package/docs/en/guides/basic-features/env-vars.mdx +2 -2
- package/docs/en/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/en/guides/basic-features/testing/_meta.json +1 -1
- package/docs/en/guides/concept/server.mdx +2 -2
- package/docs/en/guides/get-started/quick-start.mdx +2 -2
- package/docs/en/guides/get-started/tech-stack.mdx +10 -4
- package/docs/en/guides/get-started/ultramodern.mdx +93 -16
- package/docs/en/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/en/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/en/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/en/guides/troubleshooting/builder.mdx +1 -1
- package/docs/en/guides/upgrade/other.mdx +7 -7
- package/docs/zh/apis/app/commands.mdx +32 -32
- package/docs/zh/community/blog/2022-0708-updates.md +1 -1
- package/docs/zh/community/blog/2022-0910-updates.md +2 -2
- package/docs/zh/community/blog/v2-release-note.mdx +5 -5
- package/docs/zh/community/blog/v3-release-note.mdx +1 -1
- package/docs/zh/community/contributing-guide.mdx +2 -3
- package/docs/zh/community/releases.mdx +2 -2
- package/docs/zh/components/build-output.mdx +1 -1
- package/docs/zh/components/debug-app.mdx +1 -1
- package/docs/zh/components/deploy-command.mdx +3 -3
- package/docs/zh/components/init-app.mdx +36 -34
- package/docs/zh/components/init-rspack-app.mdx +1 -1
- package/docs/zh/components/prerequisites.mdx +1 -2
- package/docs/zh/components/serve-command.mdx +3 -3
- package/docs/zh/configure/app/bff/runtime-framework.mdx +1 -1
- package/docs/zh/configure/app/usage.mdx +5 -5
- package/docs/zh/guides/advanced-features/international/api.mdx +4 -1
- package/docs/zh/guides/advanced-features/international/configuration.mdx +1 -0
- package/docs/zh/guides/advanced-features/international/locale-detection.mdx +1 -1
- package/docs/zh/guides/advanced-features/international/routing.mdx +43 -2
- package/docs/zh/guides/basic-features/debug/using-storybook.mdx +1 -1
- package/docs/zh/guides/basic-features/deploy.mdx +13 -13
- package/docs/zh/guides/basic-features/env-vars.mdx +2 -2
- package/docs/zh/guides/basic-features/routes/config-routes.mdx +2 -2
- package/docs/zh/guides/basic-features/testing/_meta.json +1 -1
- package/docs/zh/guides/concept/server.mdx +2 -2
- package/docs/zh/guides/get-started/quick-start.mdx +2 -2
- package/docs/zh/guides/get-started/tech-stack.mdx +10 -4
- package/docs/zh/guides/get-started/ultramodern.mdx +90 -1
- package/docs/zh/guides/topic-detail/module-federation/application.mdx +1 -1
- package/docs/zh/guides/topic-detail/module-federation/deploy.mdx +2 -2
- package/docs/zh/guides/topic-detail/module-federation/usage.mdx +5 -5
- package/docs/zh/guides/troubleshooting/builder.mdx +1 -1
- package/docs/zh/guides/upgrade/other.md +7 -8
- package/main-doc/docs/en/guides/get-started/ultramodern.mdx +97 -14
- package/main-doc/docs/zh/guides/get-started/ultramodern.mdx +62 -3
- package/package.json +8 -8
- package/docs/en/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/en/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/en/guides/basic-features/testing/vitest.mdx +0 -100
- package/docs/zh/guides/basic-features/testing/cypress.mdx +0 -95
- package/docs/zh/guides/basic-features/testing/jest.mdx +0 -148
- package/docs/zh/guides/basic-features/testing/vitest.mdx +0 -100
|
@@ -15,12 +15,12 @@ Currently, Modern.js only supports running in a Node.js environment. Support for
|
|
|
15
15
|
|
|
16
16
|
## Build Deployment Products
|
|
17
17
|
|
|
18
|
-
Running the `
|
|
18
|
+
Running the `ultramodern deploy` command will automatically produce deployment products. This process includes optimizing Bundler build products and their dependencies, detecting the current deployment platform, and automatically generating deployment products that can run on that platform.
|
|
19
19
|
|
|
20
|
-
If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `
|
|
20
|
+
If you want to generate and test the output locally for a specific deployment platform, you can specify the platform by setting the environment variable: `ultramodern deploy`:
|
|
21
21
|
|
|
22
22
|
```bash
|
|
23
|
-
MODERNJS_DEPLOY=netlify npx
|
|
23
|
+
MODERNJS_DEPLOY=netlify npx ultramodern deploy
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
:::info
|
|
@@ -36,10 +36,10 @@ By default, Modern.js outputs builds that can be run in a Node.js environment wh
|
|
|
36
36
|
Use the following command to build the project:
|
|
37
37
|
|
|
38
38
|
```bash
|
|
39
|
-
npx
|
|
39
|
+
npx ultramodern deploy
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
When running the `
|
|
42
|
+
When running the `ultramodern deploy` command, UltraModern.js will generate runnable products and output the following content in terminal:
|
|
43
43
|
|
|
44
44
|
```bash
|
|
45
45
|
Static directory: `.output/static`
|
|
@@ -67,7 +67,7 @@ Assume that the name in the `package.json` of the current project is `app`. Taki
|
|
|
67
67
|
{
|
|
68
68
|
"scripts": {
|
|
69
69
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
70
|
-
"deploy": "pnpm run build:packages &&
|
|
70
|
+
"deploy": "pnpm run build:packages && ultramodern deploy"
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
```
|
|
@@ -78,7 +78,7 @@ If you use Rush as your Monorepo management tool, you can add the following comm
|
|
|
78
78
|
{
|
|
79
79
|
"scripts": {
|
|
80
80
|
"build:packages": "rush rebuild --to-except app",
|
|
81
|
-
"deploy": "rushx build:packages &&
|
|
81
|
+
"deploy": "rushx build:packages && ultramodern deploy"
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
```
|
|
@@ -108,7 +108,7 @@ Add the following content to `netlify.toml`:
|
|
|
108
108
|
```toml
|
|
109
109
|
[build]
|
|
110
110
|
publish = "dist"
|
|
111
|
-
command = "
|
|
111
|
+
command = "ultramodern deploy"
|
|
112
112
|
```
|
|
113
113
|
|
|
114
114
|
:::info
|
|
@@ -125,7 +125,7 @@ Full-stack projects refer to projects that use Custom Web Server, SSR or BFF. Th
|
|
|
125
125
|
```toml title="netlify.toml"
|
|
126
126
|
[build]
|
|
127
127
|
publish = "dist"
|
|
128
|
-
command = "
|
|
128
|
+
command = "ultramodern deploy"
|
|
129
129
|
|
|
130
130
|
[functions]
|
|
131
131
|
directory = ".netlify/functions"
|
|
@@ -173,7 +173,7 @@ Add the following script in `packages/app/package.json`, before executing the de
|
|
|
173
173
|
{
|
|
174
174
|
"scripts": {
|
|
175
175
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
176
|
-
"deploy": "pnpm run build:packages &&
|
|
176
|
+
"deploy": "pnpm run build:packages && ultramodern deploy"
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
```
|
|
@@ -213,7 +213,7 @@ Add the following content to `vercel.json`:
|
|
|
213
213
|
|
|
214
214
|
```json title="vercel.json"
|
|
215
215
|
{
|
|
216
|
-
"buildCommand": "
|
|
216
|
+
"buildCommand": "ultramodern deploy",
|
|
217
217
|
"outputDirectory": ".vercel/output"
|
|
218
218
|
}
|
|
219
219
|
```
|
|
@@ -281,7 +281,7 @@ Add the following script to `packages/app/package.json` to run `build` command o
|
|
|
281
281
|
{
|
|
282
282
|
"scripts": {
|
|
283
283
|
"build:packages": "pnpm --filter 'app^...' run build",
|
|
284
|
-
"deploy": "pnpm run build:packages &&
|
|
284
|
+
"deploy": "pnpm run build:packages && ultramodern deploy"
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
287
|
```
|
|
@@ -326,7 +326,7 @@ For branch deployment, follow these steps:
|
|
|
326
326
|
```
|
|
327
327
|
"scripts": {
|
|
328
328
|
//...
|
|
329
|
-
"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages
|
|
329
|
+
"deploy:gh-pages": "MODERNJS_DEPLOY=ghPages ultramodern deploy && gh-pages -d .output"
|
|
330
330
|
}
|
|
331
331
|
```
|
|
332
332
|
|
|
@@ -334,7 +334,7 @@ For branch deployment, follow these steps:
|
|
|
334
334
|
|
|
335
335
|
:::info
|
|
336
336
|
|
|
337
|
-
1. Running `MODERNJS_DEPLOY=ghPages
|
|
337
|
+
1. Running `MODERNJS_DEPLOY=ghPages ultramodern deploy` will build the production output for GitHub in the .output directory.
|
|
338
338
|
2. You can refer to the [project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/modern-js-deploy-csr)
|
|
339
339
|
:::
|
|
340
340
|
|
|
@@ -16,8 +16,8 @@ The current path prefix of the asset, which is a read-only environment variable.
|
|
|
16
16
|
|
|
17
17
|
The current execution environment and is a **read-only** environment variable whose have different values under different execution commands:
|
|
18
18
|
|
|
19
|
-
- `production`: Default value when running `
|
|
20
|
-
- `development`: Default value when running `
|
|
19
|
+
- `production`: Default value when running `ultramodern build` or `ultramodern serve`.
|
|
20
|
+
- `development`: Default value when running `ultramodern dev`, also the default value in other cases.
|
|
21
21
|
|
|
22
22
|
### MODERN_ENV
|
|
23
23
|
|
|
@@ -271,7 +271,7 @@ Config routes can be used together with convention routes. You can merge routes
|
|
|
271
271
|
|
|
272
272
|
:::info
|
|
273
273
|
|
|
274
|
-
Current route structure can be viewed through the [`
|
|
274
|
+
Current route structure can be viewed through the [`ultramodern routes`](#debugging-routes) command
|
|
275
275
|
|
|
276
276
|
:::
|
|
277
277
|
|
|
@@ -319,7 +319,7 @@ Since the final structure after route merging may not be intuitive, Modern.js pr
|
|
|
319
319
|
|
|
320
320
|
```bash
|
|
321
321
|
# Generate route structure analysis report
|
|
322
|
-
npx
|
|
322
|
+
npx ultramodern routes
|
|
323
323
|
```
|
|
324
324
|
|
|
325
325
|
This command will generate the final route structure in the `dist/routes-inspect.json` file, helping you understand the complete route information after merging.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["
|
|
1
|
+
["rstest", "playwright"]
|
|
@@ -26,10 +26,10 @@ Static asset files can be directly hosted by Modern.js' server, but it is highly
|
|
|
26
26
|
|
|
27
27
|
Modern.js supports running built artifacts in any Node.js environment. Typically, the CI environment has already installed all application dependencies.
|
|
28
28
|
|
|
29
|
-
You can run the [`
|
|
29
|
+
You can run the [`ultramodern build`](/apis/app/commands#ultramodern-build) command to build the application and the [`ultramodern serve`](/apis/app/commands#ultramodern-serve) command to run the Web server, starting the UltraModern.js application.
|
|
30
30
|
|
|
31
31
|
## Running in Production Environments
|
|
32
32
|
|
|
33
33
|
When deploying to production, the artifact size should be as small as possible. The aforementioned method for running in CI environments keeps all artifacts from the original project. Therefore, it is not recommended to run the application using the above commands in a production environment.
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
UltraModern.js offers a standalone deployment solution. When running the [`ultramodern deploy`](/apis/app/commands#ultramodern-deploy) command, the artifacts will include an entry file for running the Web server.
|
|
@@ -27,7 +27,7 @@ import DebugApp from '@site-docs-en/components/debug-app';
|
|
|
27
27
|
|
|
28
28
|
## Configuration
|
|
29
29
|
|
|
30
|
-
In
|
|
30
|
+
In an UltraModern.js project created using `@bleedingdev/modern-js-create`, a `modern.config.ts` file is generated by default.
|
|
31
31
|
|
|
32
32
|
You can modify the configuration through this file to override the default behavior of Modern.js. For example, to enable SSR, add the following configuration:
|
|
33
33
|
|
|
@@ -48,7 +48,7 @@ After running `pnpm run dev` again, you can find that the project has completed
|
|
|
48
48
|
|
|
49
49
|
In a newly created project, the `@modern-js/app-tools` npm package is installed by default. It is the core package of the Modern.js framework and provides the following capabilities:
|
|
50
50
|
|
|
51
|
-
- It offers commonly used CLI commands such as `
|
|
51
|
+
- It offers commonly used CLI commands such as `ultramodern dev`, `ultramodern build`, and more.
|
|
52
52
|
- It integrates Rsbuild, providing build capabilities.
|
|
53
53
|
- It integrates Modern.js Server, providing capabilities for development and production servers.
|
|
54
54
|
|
|
@@ -18,13 +18,13 @@ Rsbuild supports building Vue applications. If you need to use Vue, you can refe
|
|
|
18
18
|
|
|
19
19
|
Modern.js provides two first-party routing frameworks:
|
|
20
20
|
|
|
21
|
-
- [
|
|
22
|
-
- [
|
|
21
|
+
- [TanStack Router](https://tanstack.com/router) (UltraModern default), via `@modern-js/plugin-tanstack/runtime`.
|
|
22
|
+
- [React Router v7](https://reactrouter.com/en/main) (compatibility path), via `@modern-js/runtime/router`.
|
|
23
23
|
|
|
24
|
-
When creating
|
|
24
|
+
When creating an UltraModern project, TanStack Router is included by default:
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
|
|
27
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Modern.js supports conventional routing, self-controlled routing, or other routing schemes. Please refer to ["Routing"](/guides/basic-features/routes/routes) to make your choice.
|
|
@@ -84,6 +84,12 @@ Modern.js can be used with any React UI component library from the community, su
|
|
|
84
84
|
|
|
85
85
|
Modern.js supports the use of [Storybook](https://storybook.js.org/) for developing UI components. This feature is optional. Please refer to ["Using Storybook"](/guides/basic-features/debug/using-storybook) to enable it.
|
|
86
86
|
|
|
87
|
+
## Testing Framework
|
|
88
|
+
|
|
89
|
+
Modern.js recommends [Rstest](https://rstest.rs/) for unit tests and component tests. Rstest is built on Rspack for fast startup and execution, and it can reuse your Modern.js app configuration through [`@modern-js/adapter-rstest`](/guides/basic-features/testing/rstest).
|
|
90
|
+
|
|
91
|
+
For end-to-end (E2E) tests, you can use [Playwright](/guides/basic-features/testing/playwright).
|
|
92
|
+
|
|
87
93
|
## Node.js Framework
|
|
88
94
|
|
|
89
95
|
import TechStackNodeFramework from '@site-docs-en/components/tech-stack-node-framework';
|
|
@@ -36,7 +36,7 @@ UltraModern.js additions are designed as the default product surface for new Sup
|
|
|
36
36
|
| BFF runtime choices | Hono runtime path only in Modern.js 3.0 baseline (no built-in Effect runtime path) | Sets Effect as default runtime, enforces strict runtime split (`effect` -> `api/effect`, `hono` -> `api/lambda`), and adds Effect-Schema-first contracts plus MF failure-injection reliability coverage |
|
|
37
37
|
| Telemetry standardization | Observability wiring is often app-specific | Adds framework-level telemetry pipeline with OTLP/VictoriaMetrics exporters, redaction, batching, and backpressure controls |
|
|
38
38
|
| App-level MF SSR handshake | No dedicated super-app app-level stability contract focus | Adds `server.ssr.moduleFederationAppSSR` plus integration-tested env/config handshake |
|
|
39
|
-
| MF
|
|
39
|
+
| MF vertical loading reliability | Retry/fallback patterns are often implemented per app | Adds deterministic timeout/network/contract-error reliability matrix and distributed OTEL continuity tests |
|
|
40
40
|
| Module onboarding governance | No module-certification evidence profile in baseline | Adds module SDK contracts, boundary anti-pattern guards, and release/module certification gate workflows |
|
|
41
41
|
| Router runtime | Default runtime path centers on React Router | Adds first-class TanStack Router runtime/CLI path (React Router remains supported) |
|
|
42
42
|
| Scaffolding templates | Default create templates center on React Router starter path | Adds TanStack-ready and Tailwind-ready create templates |
|
|
@@ -60,21 +60,98 @@ For teams already on Modern.js 3.0, the adoption path remains compatibility-awar
|
|
|
60
60
|
|
|
61
61
|
This page is not a migration guide or codemod plan. Migration guidance for existing applications is intentionally deferred from the current Micro Verticals framework scope.
|
|
62
62
|
|
|
63
|
-
##
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
## Human Workflow
|
|
64
|
+
|
|
65
|
+
The public BleedingDev create package starts small. The default command creates
|
|
66
|
+
one production-ready UltraModern app with `presetUltramodern(...)`, SSR,
|
|
67
|
+
TanStack Router, Tailwind CSS v4, i18n, Effect BFF, generated quality gates, and
|
|
68
|
+
Cloudflare deploy basics:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
pnpm dlx @bleedingdev/modern-js-create myapp
|
|
72
|
+
cd myapp
|
|
73
|
+
mise install
|
|
74
|
+
mise exec -- pnpm install
|
|
75
|
+
mise exec -- pnpm ultramodern:check
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Create a SuperApp workspace only when independent ownership is useful:
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
pnpm dlx @bleedingdev/modern-js-create my-super-app --ultramodern-workspace
|
|
82
|
+
cd my-super-app
|
|
83
|
+
mise install
|
|
84
|
+
mise exec -- pnpm install
|
|
85
|
+
mise exec -- pnpm ultramodern:check
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The workspace starts from a shell and generated platform contracts. It does not
|
|
89
|
+
generate a demo domain by default. Add real business MicroVerticals when they
|
|
90
|
+
become real ownership boundaries:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
pnpm dlx @bleedingdev/modern-js-create transportation --vertical
|
|
94
|
+
pnpm dlx @bleedingdev/modern-js-create food-delivery --vertical
|
|
95
|
+
pnpm dlx @bleedingdev/modern-js-create payments --vertical
|
|
96
|
+
pnpm dlx @bleedingdev/modern-js-create maps --vertical
|
|
97
|
+
mise exec -- pnpm ultramodern:check
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
The `--vertical` command mutates the current workspace. It creates the vertical
|
|
101
|
+
package and updates topology metadata, ownership records, shell Module
|
|
102
|
+
Federation wiring, local development overlays, package dependencies, generated
|
|
103
|
+
contracts, ports, route-owned i18n, CSS isolation, and the vertical-owned Effect
|
|
104
|
+
BFF/client surface.
|
|
105
|
+
|
|
106
|
+
### Runtime Contracts
|
|
107
|
+
|
|
108
|
+
Generated apps and verticals keep SSR on the normal Modern.js path. SuperApp
|
|
109
|
+
workspaces add `server.ssr.moduleFederationAppSSR` when Module Federation SSR is
|
|
110
|
+
needed, but the flag remains an explicit contract rather than a requirement for
|
|
111
|
+
every app.
|
|
112
|
+
|
|
113
|
+
Each app emits `src/routes/ultramodern-route-metadata` with
|
|
114
|
+
`ultramodernLocalisedUrls`. The i18n plugin reads that map in
|
|
115
|
+
`localeDetection.localisedUrls` and serves dynamic backend JSON from
|
|
116
|
+
`/locales/{{lng}}/{{ns}}.json`. The route owner changes localized paths and
|
|
117
|
+
locale resource JSON together.
|
|
118
|
+
|
|
119
|
+
The generated contract writes `.modernjs/ultramodern-generated-contract.json`
|
|
120
|
+
with a `cssFederation` section:
|
|
121
|
+
|
|
122
|
+
- `packages/shared-design-tokens` owns the shared token layer and exports `./tokens.css`.
|
|
123
|
+
- Shell CSS owns only shell base and overlay layers under `[data-app-id="shell-super-app"]`.
|
|
124
|
+
- Each vertical owns one CSS layer, for example `[data-app-id="vertical-transportation"]` with app-local class prefixes.
|
|
125
|
+
- Tailwind CSS v4 is local to each generated app through `@tailwindcss/postcss`; shared base styles must not be duplicated by verticals.
|
|
126
|
+
- SSR first paint requires shared token CSS and app-owned CSS to be emitted by Modern/Rspack assets. Vertical CSS is loaded through manifest ownership, not copied into shell source.
|
|
127
|
+
|
|
128
|
+
Version switching must select UI, Effect API, CSS, i18n JSON, and MF manifest evidence from the same vertical build marker. A shell render that only changes the UI marker is not enough.
|
|
129
|
+
|
|
130
|
+
### Validation And Deploy
|
|
131
|
+
|
|
132
|
+
Local gates:
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
mise exec -- pnpm ultramodern:check
|
|
136
|
+
mise exec -- pnpm build
|
|
137
|
+
mise exec -- pnpm cloudflare:build
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Generated workspaces include `scripts/proof-cloudflare-version.mjs` for live
|
|
141
|
+
Cloudflare and Zephyr proof:
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
ULTRAMODERN_PUBLIC_URL_SHELL_SUPER_APP=https://shell-super-app.example.workers.dev \
|
|
145
|
+
ULTRAMODERN_PUBLIC_URL_TRANSPORTATION=https://transportation.example.workers.dev \
|
|
146
|
+
ULTRAMODERN_PUBLIC_URL_PAYMENTS=https://payments.example.workers.dev \
|
|
147
|
+
mise exec -- pnpm cloudflare:proof -- --require-public-urls
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
Live Cloudflare and Zephyr proof requires public Worker URLs and Zephyr credentials. Without those, the repo can validate generated contracts, local builds, local Cloudflare output, dry-run Zephyr evidence plans, and local evidence schemas, but it cannot prove shell-driven live version selection.
|
|
151
|
+
|
|
152
|
+
BleedingDev packages are published through GitHub Actions trusted publishing.
|
|
153
|
+
The public workflow is tokenless; do not publish packages manually from a
|
|
154
|
+
developer machine.
|
|
78
155
|
|
|
79
156
|
## Baseline Switches (Opt-out)
|
|
80
157
|
|
|
@@ -103,7 +103,7 @@ export default RemoteApp;
|
|
|
103
103
|
|
|
104
104
|
## Start the Application
|
|
105
105
|
|
|
106
|
-
Now, both the producer and consumer applications are set up. We can run `
|
|
106
|
+
Now, both the producer and consumer applications are set up. We can run `ultramodern dev` locally to start both applications.
|
|
107
107
|
|
|
108
108
|
After startup, when the consumer application accesses the `/remote` route, it will enter the producer application. Accessing `http://localhost:8080/remote` will display a complete page of the producer's remote module in the browser.
|
|
109
109
|
|
|
@@ -88,10 +88,10 @@ export default createModuleFederationConfig({
|
|
|
88
88
|
|
|
89
89
|
## Local Deployment Verification
|
|
90
90
|
|
|
91
|
-
Modern.js provides the `
|
|
91
|
+
Modern.js provides the `ultramodern deploy` command, which can easily generate products that can run in a Node.js environment.
|
|
92
92
|
|
|
93
93
|
```bash
|
|
94
|
-
|
|
94
|
+
ultramodern deploy
|
|
95
95
|
```
|
|
96
96
|
|
|
97
97
|
After executing the command, you can see the following output in the console:
|
|
@@ -154,7 +154,7 @@ The second part, `remoteExpose`, is the `key` configured in the `exposes` field
|
|
|
154
154
|
|
|
155
155
|
## Start the Applications
|
|
156
156
|
|
|
157
|
-
Now, both the producer and consumer applications are set up. You can run `
|
|
157
|
+
Now, both the producer and consumer applications are set up. You can run `ultramodern dev` locally to start both applications.
|
|
158
158
|
|
|
159
159
|
Once started, the imports of the producer's modules in the consumer will no longer throw errors, and the types will be downloaded to the consumer application.
|
|
160
160
|
|
|
@@ -164,7 +164,7 @@ After modifying the producer's code, the consumer will automatically fetch the p
|
|
|
164
164
|
|
|
165
165
|
Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
|
|
166
166
|
|
|
167
|
-
We can also execute `
|
|
167
|
+
We can also execute `ultramodern serve` locally to simulate the production environment.
|
|
168
168
|
|
|
169
169
|
Because the Module Federation plugin will automatically read Modern.js's `output.assetPrefix` configuration as the access address for remote modules, and this value defaults to `/` after building in the production environment.
|
|
170
170
|
|
|
@@ -180,7 +180,7 @@ export default defineConfig({
|
|
|
180
180
|
port: 3051,
|
|
181
181
|
},
|
|
182
182
|
output: {
|
|
183
|
-
// Now this configuration is only used in the local when you run
|
|
183
|
+
// Now this configuration is only used in the local when you run ultramodern serve command.
|
|
184
184
|
// If you want to deploy the application to the platform, use your own domain name.
|
|
185
185
|
// Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
|
|
186
186
|
assetPrefix: 'http://127.0.0.1:3051',
|
|
@@ -189,10 +189,10 @@ export default defineConfig({
|
|
|
189
189
|
});
|
|
190
190
|
```
|
|
191
191
|
|
|
192
|
-
Now, in the producer, run `
|
|
192
|
+
Now, in the producer, run `ultramodern build && MODERN_MF_AUTO_CORS=true ultramodern serve`, and in the consumer, run `ultramodern build && ultramodern serve` to simulate the production environment locally and access the remote modules.
|
|
193
193
|
|
|
194
194
|
:::tip
|
|
195
|
-
When using the `
|
|
195
|
+
When using the `ultramodern serve` command, you need to set the `MODERN_MF_AUTO_CORS=true` environment variable when starting the producer project to automatically handle CORS issues and ensure that consumers can properly access the producer's remote module resources.
|
|
196
196
|
:::
|
|
197
197
|
|
|
198
198
|
You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
|
|
@@ -23,7 +23,7 @@ Modern.js is internally based on [Rsbuild](https://v2.rsbuild.rs/) and encapsula
|
|
|
23
23
|
Modern.js provides [inspect command](https://modernjs.dev/en/apis/app/commands.html) to view the final Modern.js configuration and Rspack configuration generated by the project.
|
|
24
24
|
|
|
25
25
|
```bash
|
|
26
|
-
➜ npx
|
|
26
|
+
➜ npx ultramodern inspect
|
|
27
27
|
|
|
28
28
|
Inspect config succeed, open following files to view the content:
|
|
29
29
|
|
|
@@ -87,14 +87,14 @@ Modern.js 3.0 uses React Router v7 as the default routing library. React Router
|
|
|
87
87
|
|
|
88
88
|
If you need to use React Router v5 or React Router v6, you need to use **self-controlled routing** mode. Self-controlled routing allows you to fully control routing configuration without being limited by Modern.js convention-based routing.
|
|
89
89
|
|
|
90
|
-
## Using @modern-js
|
|
90
|
+
## Using @bleedingdev/modern-js-create to Create Monorepo and Modern.js Module
|
|
91
91
|
|
|
92
|
-
Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module projects through `@modern-js
|
|
92
|
+
Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module projects through `@bleedingdev/modern-js-create`.
|
|
93
93
|
|
|
94
94
|
**Changes**:
|
|
95
95
|
|
|
96
|
-
- In [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the functionality to create Monorepo projects using `@modern-js
|
|
97
|
-
- In [v2.61.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.61.0), the functionality to create Modern.js Module projects using `@modern-js
|
|
96
|
+
- In [v2.53.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.53.0), the functionality to create Monorepo projects using `@bleedingdev/modern-js-create` was removed
|
|
97
|
+
- In [v2.61.0](https://github.com/web-infra-dev/modern.js/releases/tag/v2.61.0), the functionality to create Modern.js Module projects using `@bleedingdev/modern-js-create` and `ultramodern new` commands was removed
|
|
98
98
|
|
|
99
99
|
**Handling**:
|
|
100
100
|
|
|
@@ -103,12 +103,12 @@ Modern.js 3.0 no longer supports creating Monorepo projects and Modern.js Module
|
|
|
103
103
|
|
|
104
104
|
## new and upgrade Commands Removed
|
|
105
105
|
|
|
106
|
-
Modern.js 3.0 removed the `
|
|
106
|
+
Modern.js 3.0 removed the `ultramodern new` and `ultramodern upgrade` commands, and you need to perform operations manually according to the documentation.
|
|
107
107
|
|
|
108
108
|
**Changes**:
|
|
109
109
|
|
|
110
|
-
- The `
|
|
111
|
-
- The `
|
|
110
|
+
- The `ultramodern new` command is no longer supported in Modern.js 3.0, and you cannot add entries or enable features through commands
|
|
111
|
+
- The `ultramodern upgrade` command is no longer supported in Modern.js 3.0, and you cannot automatically upgrade dependencies through commands
|
|
112
112
|
|
|
113
113
|
**Handling**:
|
|
114
114
|
|
|
@@ -4,16 +4,16 @@ sidebar_position: 1
|
|
|
4
4
|
|
|
5
5
|
# 命令
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
UltraModern.js 内置了一些命令,可以帮助你快速启动开发服务器、构建生产环境代码等。
|
|
8
8
|
|
|
9
|
-
通过本章节,你可以了解到
|
|
9
|
+
通过本章节,你可以了解到 UltraModern.js 内置的命令有哪些,以及如何使用这些命令。
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## ultramodern dev
|
|
12
12
|
|
|
13
|
-
`
|
|
13
|
+
`ultramodern dev` 命令用于启动一个本地开发服务器,对源代码进行开发环境编译。
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
|
-
Usage:
|
|
16
|
+
Usage: ultramodern dev [options]
|
|
17
17
|
|
|
18
18
|
Options:
|
|
19
19
|
-e --entry <entry> 指定入口,只编译特定的页面
|
|
@@ -23,10 +23,10 @@ Options:
|
|
|
23
23
|
--api-only 仅启动 API 接口服务
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
运行 `
|
|
26
|
+
运行 `ultramodern dev` 后,UltraModern.js 会监听源文件变化并进行模块热更新。
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
$
|
|
29
|
+
$ ultramodern dev
|
|
30
30
|
|
|
31
31
|
info Starting dev server...
|
|
32
32
|
|
|
@@ -38,10 +38,10 @@ info Starting dev server...
|
|
|
38
38
|
|
|
39
39
|
在多页面(MPA)项目中,可以添加 `--entry` 参数来指定编译其中的一个或多个页面。这样可以只编译项目中的部分代码,从而提升 dev 启动速度。
|
|
40
40
|
|
|
41
|
-
比如执行 `
|
|
41
|
+
比如执行 `ultramodern dev --entry`,在命令行界面中会展示入口选择框:
|
|
42
42
|
|
|
43
43
|
```bash
|
|
44
|
-
$
|
|
44
|
+
$ ultramodern dev --entry
|
|
45
45
|
|
|
46
46
|
? 请选择需要构建的入口
|
|
47
47
|
❯ ◯ foo
|
|
@@ -57,22 +57,22 @@ $ modern dev --entry
|
|
|
57
57
|
|
|
58
58
|
```bash
|
|
59
59
|
# 编译 foo 页面
|
|
60
|
-
|
|
60
|
+
ultramodern dev --entry foo
|
|
61
61
|
|
|
62
62
|
# 编译 foo 和 bar 页面
|
|
63
|
-
|
|
63
|
+
ultramodern dev --entry foo,bar
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
##
|
|
66
|
+
## ultramodern start
|
|
67
67
|
|
|
68
|
-
`
|
|
68
|
+
`ultramodern start` 是 `ultramodern dev` 命令的别名,两者的功能和用法完全一致。
|
|
69
69
|
|
|
70
|
-
##
|
|
70
|
+
## ultramodern build
|
|
71
71
|
|
|
72
|
-
`
|
|
72
|
+
`ultramodern build` 命令默认会在 `dist/` 目录下构建出可用于生产环境的产物。你可以通过修改配置 [`output.distPath`](/configure/app/output/dist-path) 指定产物的输出目录。
|
|
73
73
|
|
|
74
74
|
```bash
|
|
75
|
-
Usage:
|
|
75
|
+
Usage: ultramodern build [options]
|
|
76
76
|
|
|
77
77
|
Options:
|
|
78
78
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -80,14 +80,14 @@ Options:
|
|
|
80
80
|
-w --watch 开启 watch 模式, 监听文件变更并重新构建
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
##
|
|
83
|
+
## ultramodern new
|
|
84
84
|
|
|
85
|
-
`
|
|
85
|
+
`ultramodern new` 命令用于在已有项目中添加项目元素。
|
|
86
86
|
|
|
87
87
|
比如添加应用入口、启用一些可选功能如 BFF、微前端开发模式等。
|
|
88
88
|
|
|
89
89
|
```bash
|
|
90
|
-
Usage:
|
|
90
|
+
Usage: ultramodern new [options]
|
|
91
91
|
|
|
92
92
|
Options:
|
|
93
93
|
--config-file <configFile> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -104,7 +104,7 @@ Options:
|
|
|
104
104
|
在 Modern.js 工程中,执行 `new` 命令添加入口的步骤如下:
|
|
105
105
|
|
|
106
106
|
```bash
|
|
107
|
-
$ npx
|
|
107
|
+
$ npx ultramodern new
|
|
108
108
|
? 请选择你想要的操作 创建工程元素
|
|
109
109
|
? 请选择创建元素类型 新建「应用入口」
|
|
110
110
|
? 请填写入口名称 entry
|
|
@@ -115,7 +115,7 @@ $ npx modern new
|
|
|
115
115
|
在 Modern.js 工程中,执行 `new` 命令启用可选能力的步骤如下:
|
|
116
116
|
|
|
117
117
|
```bash
|
|
118
|
-
$ npx
|
|
118
|
+
$ npx ultramodern new
|
|
119
119
|
? 请选择你想要的操作 启用可选功能
|
|
120
120
|
? 请选择功能名称 (Use arrow keys)
|
|
121
121
|
❯ 启用「BFF」功能
|
|
@@ -133,12 +133,12 @@ import ServeCommand from '@site-docs/components/serve-command';
|
|
|
133
133
|
|
|
134
134
|
<ServeCommand />
|
|
135
135
|
|
|
136
|
-
##
|
|
136
|
+
## ultramodern upgrade
|
|
137
137
|
|
|
138
|
-
在项目根目录下执行命令 `npx
|
|
138
|
+
在项目根目录下执行命令 `npx ultramodern upgrade`,会默认将当前执行命令项目的 `package.json` 中的 UltraModern.js 相关依赖更新至最新版本。
|
|
139
139
|
|
|
140
140
|
```bash
|
|
141
|
-
Usage:
|
|
141
|
+
Usage: ultramodern upgrade [options]
|
|
142
142
|
|
|
143
143
|
Options:
|
|
144
144
|
-c --config <config> 指定配置文件路径,可以为相对路径或绝对路径
|
|
@@ -148,12 +148,12 @@ Options:
|
|
|
148
148
|
-h, --help display help for command
|
|
149
149
|
```
|
|
150
150
|
|
|
151
|
-
##
|
|
151
|
+
## ultramodern inspect
|
|
152
152
|
|
|
153
|
-
`
|
|
153
|
+
`ultramodern inspect` 命令用于查看项目的 UltraModern.js 配置、[Rsbuild 配置](https://v2.rsbuild.rs/zh/config/index) 以及 Rspack 配置。
|
|
154
154
|
|
|
155
155
|
```bash
|
|
156
|
-
Usage:
|
|
156
|
+
Usage: ultramodern inspect [options]
|
|
157
157
|
|
|
158
158
|
Options:
|
|
159
159
|
--env <env> 查看指定环境下的配置 (default: "development")
|
|
@@ -163,14 +163,14 @@ Options:
|
|
|
163
163
|
-h, --help 显示命令帮助
|
|
164
164
|
```
|
|
165
165
|
|
|
166
|
-
在项目根目录下执行命令 `npx
|
|
166
|
+
在项目根目录下执行命令 `npx ultramodern inspect` 后,会在项目的 `dist` 目录生成以下文件:
|
|
167
167
|
|
|
168
168
|
- `modern.js.config.mjs`: 表示当前使用的 Modern.js 配置。
|
|
169
169
|
- `rsbuild.config.mjs`: 表示在构建时使用的 Rsbuild 配置。
|
|
170
170
|
- `rspack.config.web.mjs`: 表示在构建时使用的 Rspack 配置。
|
|
171
171
|
|
|
172
172
|
```bash
|
|
173
|
-
➜ npx
|
|
173
|
+
➜ npx ultramodern inspect
|
|
174
174
|
|
|
175
175
|
Inspect config succeed, open following files to view the content:
|
|
176
176
|
|
|
@@ -184,7 +184,7 @@ Inspect config succeed, open following files to view the content:
|
|
|
184
184
|
默认情况下,inspect 命令会输出开发环境的配置,你可以添加 `--env production` 选项来输出生产环境的配置:
|
|
185
185
|
|
|
186
186
|
```bash
|
|
187
|
-
|
|
187
|
+
ultramodern inspect --env production
|
|
188
188
|
```
|
|
189
189
|
|
|
190
190
|
### 完整内容
|
|
@@ -192,7 +192,7 @@ modern inspect --env production
|
|
|
192
192
|
默认情况下,inspect 命令会省略配置对象中的函数内容,你可以添加 `--verbose` 选项来输出函数的完整内容:
|
|
193
193
|
|
|
194
194
|
```bash
|
|
195
|
-
|
|
195
|
+
ultramodern inspect --verbose
|
|
196
196
|
```
|
|
197
197
|
|
|
198
198
|
### SSR 构建配置
|
|
@@ -200,7 +200,7 @@ modern inspect --verbose
|
|
|
200
200
|
如果项目开启了 SSR 能力,则在 `dist` 目录会另外生成一份 `rspack.config.node.mjs` 文件,对应 SSR 构建时的 Rspack 配置。
|
|
201
201
|
|
|
202
202
|
```bash
|
|
203
|
-
➜ npx
|
|
203
|
+
➜ npx ultramodern inspect
|
|
204
204
|
|
|
205
205
|
Inspect config succeed, open following files to view the content:
|
|
206
206
|
|
|
@@ -17,7 +17,7 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0,本双月的主要更新有:
|
|
|
17
17
|
|
|
18
18
|
Modern.js 框架和相关插件完成对 React 18 的适配。现在,只需要将项目中的 `react`、`react-dom` 两个包的版本,升级到最新的 React 18 大版本,就可以使用 React 18 的新功能。
|
|
19
19
|
|
|
20
|
-
注意,使用 `@modern-js
|
|
20
|
+
注意,使用 `@bleedingdev/modern-js-create` 命令默认创建的项目,安装的依赖 `react`、`react-dom` 的版本仍然为 17,如果希望使用 React 18,请手动升级这两个包的版本。
|
|
21
21
|
|
|
22
22
|
另外,SSR 流式渲染功能,目前尚在开发中,暂不支持。
|
|
23
23
|
|