Micro-Frontends Course – Beginner to Expert

Ecommerce Empire Academy

Don't know what a Micro-Frontend, but you've heard the buzz and you want to learn it. Let me take you from just starting out, to understanding asynchronous loading, error handling, shared state, cross platform micro-frontends, how to route multiple applications together, and even how to test Micro-Frontend code.

✏️ Jack's channel:

💻 Code:

⌨️ (0:00:00) Introduction
⌨️ (0:01:06) Micro-Frontend demo
⌨️ (0:08:13) Why Micro-Frontends?
⌨️ (0:11:50) Why Module Federation?
⌨️ (0:20:16) Asynchronous Loading
⌨️ (0:24:56) Error Handling
⌨️ (0:31:42) Server Setup
⌨️ (0:38:36) Sharing Functions
⌨️ (0:50:15) Nomenclature
⌨️ (0:51:35) Sever Cart Setup
⌨️ (0:59:28) Sharing State
⌨️ (1:02:42) Sharing the JWT
⌨️ (1:13:53) Sharing the Cart
⌨️ (1:26:48) State Sharing Alternatives
⌨️ (1:27:21) Finishing the Cart
⌨️ (1:29:36) Cross-Platform Micro-Frontends
⌨️ (1:39:02) Micro-Frontend Routing
⌨️ (1:48:24) Unit Testing
⌨️ (1:51:53) End-To-End Testing
⌨️ (1:54:55) What's Next?

#microFrontends #moduleFederation #react #solidjs

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

37 thoughts on “Micro-Frontends Course – Beginner to Expert”

  1. Hello…. Excited to learn micro frontend and add the experience as a frontend developer… thank you for this 😊

  2. Thank you so much for allowing me to share this content on the Micro-Frontend architecture is, and how powerful and easy it is to get started with the Module Federation support built into Webpack 5. This video uses primarily React, along with a little Solid-JS, it also uses Tailwind, React-Router, RxJS, and more. And you’ll even get to see a cool VS Code diagramming extension that will help you format graphics for the presentations you’ll make demonstrating the value of Micro-Frontend architecture at your work.

    For more information on the topic, here my Module Federation playlist: https://www.youtube.com/playlist?list=PLNqp92_EXZBLr7p7hn6IYa1YPNs4yJ1t1

    From there you can go to my channel and find more videos, including an entire free course on TypeScript, as well as weekly videos on both basic and advanced programming topics.

    1. socrates hlapolosa

      great vid, very insightfull. Just one question though. How does the MainLayout solution allow us to share state i.e. like a SPA. if the problem was that by loggin into home you’re not logged into cart, why/how does this help?

    2. Jack Herrington

      @socrates hlapolosa There are a bunch of different options to share state. The reason we aren’t getting it here is because each app is in it’s own browser window. If you wanted to share state across those you could use your own backend or use something like Firebase or Supabase.

    3. socrates hlapolosa

      @Jack Herrington thank you for the feedback, makes perfect sense. BTW of what value is the self reference so eg. cart expose the cart remotely through rxjs, but uses that remote reference within the cart application and not a direct reference to an instance, why is there a reason for that?

    4. Jack Herrington

      @socrates hlapolosa Earlier versions of Module Federation didn’t resolve a local reference and a reference to a remote module even if they were actually the same module. That’s fixed now though. So you could just reference the file directly if it’s local to you.

    5. socrates hlapolosa

      @Jack Herrington your insights are much appreciated, microfi’s are a game changer

  3. Thanks Jack for the quick working implementation of micro front end in the first 8mins of this video! awesome. will follow the whole vid.

  4. In case anyone gets blocked when trying to add React Router: If you just install router as shown in the video (with npm/yarn) without specifying a version, you’ll get React Router v6. This version has replaced the Switch component with a Routes (not Route) component but it behaves the same and also changed the “component” prop on Route to be “element”. Route’s “element” prop requires the component to be passed in as “” not just PDPContent like in the video.

    1. omg, i was struggling with the element={<.../>} a lot, thanks for this comment! you accidentally fixed my code which is not even related to this video

    2. Could you reply with the snippet of code that you used to fix the issue please?

  5. Jack this is a very good explanation and thank you for sharing knowledge, can you put the video link of the Error Handling scenario of loading the older version with the help of NPM and error boundaries. I couldn’t find it. Appreciate it if you can mention the video link with us.

  6. After watching demo part at the beginning here is my opinion:
    This may be very beneficial for large projects that are developed by multiple teams but I think nx workspaces provides similar benefits more conveniently for projects that are developed by single team.

    Thanks for the high quality free content.

    1. The point of micro frontends is that each microfrontend can be developed independently.
      Nx workspaces doesn’t solve that issue.

  7. You’ve highlighted a major problem with micro frontends in this video in that you need to have versioning. Wrapping components in an error boundary is not a solution, nor is having a fallback to a library. You may as well just have the library in the first place.

    1. Having only the npm library robs you of the whole point of module federation which is having your micro front-ends update by just refreshing the page rather that communicating about a library update and redeploying. I agree with you though in a sense that depending on how much you’re dependent on those live updates, module federation might just be a complication you don’t need to add

    2. @Jahz Yeah that’s my point. Team A can’t deploy an api change to a component because it will break everyone who consumes it. I can’t see a way you could coordinate breaking changes without versioning so then you end up either needing to have a rule like “components must never have props” or you have versioning which defeats the whole purpose of module federation.

  8. Thank you so much, it’s very informative and make it easy to understandable. thanks 😊 👍👍👍

  9. CHITUS💙⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    You’ve highlighted a major problem with micro frontends in this video in that you need to have versioning. Wrapping components in an error boundary is not a solution, nor is having a fallback to a library. You may as well just have the library in the first place.

  10. Awesome Content Jack. Wondering how you would go about doing this in an app that is created with CRA?

    1. Travis Gillitzer

      CRA doesn’t have support for Module Federation yet I don’t think.. I’m not sure if they even have a version that supports Webpack 5 yet.

  11. Sebastian Paniagua Isaza

    Just for anyone who’s dealing with an error when adding reac-router-dom, I’ve just find out that Switch is no longer Supported. Use Routes instead. React and it’s changes are really annoying.

    1. Could you reply with the snippet of code that you used to fix the issue please?

  12. Great video, very well explained concepts and implementations. I am currently gearing up to implement microfrontends in my projects at work, but as with other videos in the scene currently yu have not dug into how they are hosted and shared via real environments once deployed. I have hazarded some guesses. In the Webpack configs we point to where the remote projects are hosted (locally (localhost) on in your tutorial) is it safe to safe we just need to point at where we store them once deployed, for me this would be in the nginx folder, nginx/build/project files (index.js).

    Cheers

  13. Hi thanks for the greate video
    Pnpx isnt just a windows thing. Its great for all platforms because it uses caching and symbolic links to resuse dependecies on your machine. So you wont need to use 30% of your hard drive just for node_module folders.
    There are more nice features but the caching and linking one is the think that makes pnpm stands out of all the others

  14. Thanks Jack for this awesome content! Just quick question: I am getting CORS issue with my application. I cannot get product to home or everywhere it is supposed to be displayed due to CORS which blocks the request. Any idea? Thanks!

  15. Bro, can you have a microfe in React and another in Angular? That would be awesome! Really good content.Thank you so much

Comments are closed.