One Domain, Multiple Frameworks： Microfrontends on Cloudflare

So imagine this, you've got a marketing website, a documentation site, a blog, and maybe a dashboard too. It's very likely that these have been built by four different teams, and maybe they have used four different frameworks. It could be React, it could be Astro, it could be Dynastack Start, doesn't matter. You just want one website domain with seamless user experience. And that's exactly what Cloudflare's vertical micro frontends do. I just wanted to show you how it works. Here's the situation most teams and applications run into as they scale. You start with a monolith, everything just lives in one repository, you just have one deploy pipeline. Then your team grows, and now everyone has to coordinate deployments. This thing is very error prone. A bug in the documentation site can break your dashboard too. We don't want this. Vertical micro frontends solve this by splitting your app by URL path. Slash, or the root index, is your marketing site. Slash docs is for documentation built on Astro. Slash dashboard could be built on Dynastack Start, is your application or your dashboard. And slash blog is a blog that lives completely separately. Each one is its own project, its own repository, it has its own deployment pipeline. But for the user, it's just one single website. So I've got four different projects deployed as workers on Cloudflare already. And I just wanted to show you what we are dealing with. This is the marketing landing page. It's built with Astro and Tailwind. It's clean, it's fast, and it's static. And it makes sense using Astro over here. Also, let me know in the comments if you want this template as an open source thing. I'll just publish it. And then we have the documentation. This one is built with Astro, but it uses the Starlight theme. And then we have the blog. This is using MDX along with Astro. And you can see that it has its own URLs for articles. And again, a separate worker altogether. And then finally, we have the dashboard. This is again a separate worker. It's built with ShadCN and ReCharts. So four projects, three using Astro and one built with React. All deployed as their own worker. Right now, they're just sitting there independently and isolated. So let's just stitch them together in five minutes using the vertical front-end feature. Let's open the Cloudflare dashboard. nash.Cloudflare.com Head over to Compute. Select Workers and Pages. You can see these four workers that I was just demoing you. Let's create a new application. So here's where you select a template. If you scroll down, you'll see a Create Micro Front-end button. Let's select this. Let's give this a name. I'll name it as My Application. And it requires a domain. Let's select this empty domain that I have lying around. And let's add slash for demo website. Let's add another one. Slash docs for the documentation. Slash blog for blog. And then finally, slash dashboard, which is our ShadCN dashboard. And I also want to select this preload this app for faster transitions. Once you do this, just hit deploy. It usually takes like one to two minutes. And you should have a micro front-end ready. So all these websites will now come under just one domain. And yeah, there we go. If you visit this inboxtool.com Let's head over to blog. You can see it's opening the blog immediately. And if you go back to documentation. It opens the slash documentation as a separate router, but under just one domain. And also the dashboard. If you hit back, you'll be back to the original website. And that's the best part. Each of these projects get deployed independently. The blog team can deploy articles whenever they want. The dashboard team can roll back without touching anything else. No coordinated releases. That was the whole point. And that's it for today. If you want to try this feature out. I have linked the documentation and an article explaining more about vertical front-ends. In the description or the thread or comments. Go build something with it and let me know how it goes.