docs: microfrontends #10771
docs: microfrontends #10771
Conversation
turbo-orchestrator
bot
added
area: docs
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
As of |
|
|
||
| Refer to the documentation for your framework, library, or runtime to learn how to set the port for the script. | ||
|
|
||
| ### 4. Add the `@turbo/microfrontends` package to child apps |
There was a problem hiding this comment.
| ### 4. Add the `@turbo/microfrontends` package to child apps | |
| ### 4. Add the `@vercel/microfrontends` package to child apps |
| { | ||
| "name": "docs", | ||
| "devDependencies": { | ||
| + "@turbo/microfrontends": "workspace:*" |
There was a problem hiding this comment.
| + "@turbo/microfrontends": "workspace:*" | |
| + "@vercel/microfrontends": "workspace:*" |
| { | ||
| "name": "docs", | ||
| "devDependencies": { | ||
| + "@turbo/microfrontends": "workspace:*" |
There was a problem hiding this comment.
| + "@turbo/microfrontends": "workspace:*" | |
| + "@vercel/microfrontends": "workspace:*" |
| { | ||
| "name": "docs", | ||
| "devDependencies": { | ||
| + "@turbo/microfrontends": "workspace:*" |
There was a problem hiding this comment.
| + "@turbo/microfrontends": "workspace:*" | |
| + "@vercel/microfrontends": "workspace:*" |
| { | ||
| "name": "docs", | ||
| "devDependencies": { | ||
| + "@turbo/microfrontends": "workspace:*" |
There was a problem hiding this comment.
| + "@turbo/microfrontends": "workspace:*" | |
| + "@vercel/microfrontends": "workspace:*" |
|
|
||
| Turborepo enhances microfrontend development with: | ||
|
|
||
| - **Unified development experience**: Start all your microfrontends with a single command |
There was a problem hiding this comment.
I feel like the unified devx we offer is that you can browse all of your microfrontends from a single host locally. Maybe we link to https://vercel.com/docs/microfrontends/local-development#the-need-for-a-microfrontends-proxy explaining why this is helpful?
| With the microfrontends configuration, Turborepo will: | ||
|
|
||
| 1. Start each application on its designated port | ||
| 2. Handle dependencies between applications |
There was a problem hiding this comment.
"Handle dependencies", might be too vague
| 2. Handle dependencies between applications | |
| 2. Handle routing between applications |
| { | ||
| "version": "1", | ||
| "applications": { | ||
| "docs": {} |
There was a problem hiding this comment.
We should provide a full config with default and child application
| "docs": {} | |
| "web": {}, | |
| "docs": { | |
| "paths": ["/docs"] | |
| } |
| ```bash title="Terminal" | ||
| turbo dev --filter=docs | ||
| ``` |
There was a problem hiding this comment.
A callout that if only docs is run all web routes will be served by the "default" host might be useful.
|
|
||
| ### Child configurations | ||
|
|
||
| Individual microfrontend packages can reference a parent configuration using a `partOf` field. This allows child applications to inherit configuration from the parent application. |
There was a problem hiding this comment.
The partOf configuration might make sense to cut as it doesn't "do" anything aside to point to which package contains the configuration. There's no overriding that can be done at this level. (IIRC)
| Individual microfrontend packages can reference a parent configuration using a `partOf` field. This allows child applications to inherit configuration from the parent application. | |
| Individual microfrontend packages can declare they're membership of a parent microfrontend using a `partOf` field. |
Description
Documenting the new microfrontends feature. it also comes with an example that folks can try out.
Testing Instructions
👀 Read the docs.
🧪 Try the example.