Skip to content

Microfrontend, explanation and example how-to without using frameworks

Notifications You must be signed in to change notification settings

Glareone/MicroFrontend-ModuleFederation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MicroFrontend cooked with React

General Info: Main topics for decision making if you choose Microfrontend Framework

image @ Article by Luca Mezzalira

General problems

  • Who does hold the domain?
  • Does team response for the whole page or just for a part of it?
  • Who is responsible for MFE Infrastructure
  • Horizontal or Vertical approach

MFE Composition

  • Client Side - Templates-like
  • Server Side - main question how to put everything together. Parsing templates
  • Edge Side - Edge-side includes, "ESI". Served on the edge: Little Article

Options:

Webpack Module Federation, Single SPA, TailorX, ILC (Isomorphic Layout Composer). PRIVJS - Microfrontend for NextJS with Module Federation and SSR

  • Only one options is available for NextJS which supports module federation and SSR
    image PRIVJS. Microfrontend for NextJS. ~100$ per month
  • Good options by default image
  • Good choise for nodejs and something custom: image
  • Really good option because of having lots of features out of the box image
  • Mixing TailorX and Single SPA image
  • Open Components - works since ~2014 image
  • Piral - quite new. image

Application: install and run

inspired by this blog : blog.bitsrc.io/how-to-develop-microfrontends

To properly run this application we have to run each of them

  1. cd cats, npm start
  2. cd dogs, npm start (in another console)
  3. cd container, npm start (in another console)

To run on UNIX instead of npm start just use npm start_unix

Explanation

This app consists of 3 parts:

  1. Container. It is a root of our entire application. It has MicroFrontend component - special container which wraps and draw our single components Dog and Cat
  2. Cats. SPA which draws cat and button to change a random cat. Along with that our Cat application has routing and after redirecting on "/cat/:greeting" it will show us a cat with greeting message.
  3. Dogs. SPA which draws a random dog.

Interesting files

  1. config-overrides - in order to prevent chunking and do that without webpack configuration ejection we need to use config-overrides file + react-app-rewired. Used in Cats and Dogs apps.

About

Microfrontend, explanation and example how-to without using frameworks

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published