-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
docs(nextjs): Add vercel specific microfrontends guide #15520
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Bundle ReportChanges will increase total bundle size by 53.24kB (0.23%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-server-cjsAssets Changed:
view changes for bundle: sentry-docs-client-array-pushAssets Changed:
|
inventarSarah
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey 👋
I haven't reviewed everything yet, but I have a question about the scope of the guide that I need answered before continuing (see my comment).
Thanks!
docs/platforms/javascript/guides/nextjs/best-practices/micro-frontends.mdx
Outdated
Show resolved
Hide resolved
| @@ -0,0 +1,39 @@ | |||
| --- | |||
| title: Micro Frontends | |||
| description: "Learn how to add Sentry instrumentation to your Vercel's micro frontend projects." | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this guide only for Vercel? If so, do we need the detailed content on module federation. As I understand it, Vercel only supports mult-zone apps - please lmk :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, I tried setting one up and it worked, although they don't document it:
https://github.com/vercel-labs/microfrontends-single-spa-module-federation/
It's not in their docs or listed anywhere except their GitHub, so what do you think we should do here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should stick to what's officially supported by Vercel. We can always update and revise if they support both approaches in the future.
I thought about your page a bit over the weekend, and I think the safest approach for users would be to keep the existing shared "Micro Frontends" page for Next.js (the one that is currently live) and add the Vercel multi-zone info as a new section rather than replacing the whole page.
That way, Vercel users and non-Vercel users can find everything in one place
My proposal:
Add the original MF page back under nextjs and add a new section for Vercel multi-zone apps that only shows up for Next.js as the first subsection of the page. You can use the PlatformSection component for this:
<PlatformSection supported={["javascript.nextjs"]}>
## Vercel Multi-Zone Micro Frontends
...
</PlatformSection>In this new section, we can include a short intro to Vercel multi-zone apps and then reuse/adjust your existing “Multi-zone applications” content to explain how to set up Sentry in that environment.
Let me know if this makes sense!
And I’m more than happy to help with restructuring or integrating the Vercel content so the work you put in fits into the overall page. Just let me know!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 on adding this content to the existing page of microfrontends, you can keep a small note on module federation though (helps with search and module federation is well known).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep makes sense! I will make the necessary changes.
EDIT: Done, is that what you folks had in mind?
6d6f90e to
dc50d67
Compare
inventarSarah
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great now, thank you! 🎀
docs/platforms/javascript/common/best-practices/micro-frontends.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/best-practices/micro-frontends.mdx
Outdated
Show resolved
Hide resolved
docs/platforms/javascript/common/best-practices/micro-frontends.mdx
Outdated
Show resolved
Hide resolved
Co-authored-by: Sarah Mischinger <sarah@codingwriter.com>
Co-authored-by: Sarah Mischinger <sarah@codingwriter.com>
Co-authored-by: Sarah Mischinger <sarah@codingwriter.com>
Co-authored-by: Sarah Mischinger <sarah@codingwriter.com>
|
Thanks for the suggestions 🙏 I have applied them and will merge once the CI finishes. |
Adds micro frontends guide specific to vercel's microfrontends feature since it has multi-zone application support which doesn't require the use of module federation.