Getting Started with Micro Frontends in React

A fantastic way to learn is by building a small application. Start with a shell app using the Vite plugin for module federation. Try exposing a remote app and consuming it in the shell. A practical approach could be creating a Redux store in your shell app and accessing it from the remote app. This should give you a hands-on feel for how data sharing works in micro frontends.

I've been using React microfrontends with single-spa. We have a host project that runs on a specific port, serving as the base to register micro services on route matching for lazy loading. It’s worked well overall, but we’ve encountered challenges like authentication issues and style bleeding. However, the separation of concerns is a major advantage!

If you're curious about the setup, why not chat with your engineering manager or teammates? They might have insights on what you need to get started. If setting everything from scratch is on you, it's crucial to understand why that choice was made. Finding the decision-maker for this could save you a lot of time. It’s all about teamwork!

Honestly, if you're not entirely sure micro frontends are necessary, it might be worth considering starting with a modular monolith approach. If you find that your project really needs the complexity of micro frontends later, you can transition into that.

From what you've shared, it sounds like you'll be working on individual modules that act like standalone applications. The beauty of micro frontends is in how they allow teams to develop parts of a larger product separately, much like how car parts are made individually but come together to form a finished vehicle. Keep in mind that while they solve some organizational challenges, they can introduce complexity. Just be prepared for that!