Questions tagged [micro-frontend]

In a micro-frontend architecture, the user interface is divided into multiple self-contained micro-applications, each responsible for a specific functionality or feature. These micro-applications can be developed using different technologies, frameworks, or programming languages, depending on the team's preferences and requirements.

One of the key benefits of micro-frontends is the ability to decouple frontend development, allowing teams to work autonomously and adopt different technologies as needed. This flexibility enables independent deployment and scalability of individual micro-applications, reducing the risk of regressions and minimizing the impact of changes.

Micro-frontends can communicate and collaborate with each other through well-defined APIs or by leveraging shared data stores or events. This allows seamless integration and coordination between different micro-applications, providing a unified and cohesive user experience.

Another advantage of micro-frontends is their potential for reusability. Teams can develop common UI components, styles, and utilities that can be shared across micro-applications, promoting consistency and reducing duplication of effort. This reusability also facilitates maintenance and updates, as changes made to shared components can be automatically propagated to all micro-applications using them.

However, implementing micro-frontends requires careful planning and consideration of various aspects such as communication protocols, data sharing mechanisms, routing, and coordination between micro-applications. It may also introduce additional complexity, as each micro-application needs to be independently developed, tested, and deployed.

Despite the challenges, micro-frontends provide an effective approach for large-scale frontend development, empowering teams to work efficiently, scale their applications, and deliver enhanced user experiences through modular, independent, and reusable components.

583 questions
3
votes
0 answers

Single SPA - Handle error in nested micro front end

MFE = micro-front-end I'm trying to import 1 MFE to another MFE. MFE-food calls MFE-cart. When MFE-cart is down, there is an impact on MFE-food, my expectation is MFE should run properly. in root-config, I have added addErrorHandler(err => { if…
Vzans
  • 91
  • 1
  • 6
3
votes
1 answer

How to show react and angular on same page using micro-frontend Runtime integration approach?

I have my main (parent) app written in Angular. Now I want to use a react component inside the parent app using the micro-frontend approach, But I want it to be Runtime integration. for example, the Header of my application is in Angular. Now I want…
Prafull Dhadkar
  • 891
  • 2
  • 10
  • 23
3
votes
1 answer

After deploy projects configured with Vercel or Nextjs rewriting can't find assets path

I have the following structure to use one domain to multiple projects: A repo that contains a single vercel.json file to configure path to others projects A repo that contains a home app example A repo that contains a checkout app example The…
3
votes
1 answer

Creating Structural Micro Frontend Using single-spa

I would like to design my frontend as a micro frontend project, and I would like to use single-spa. The problem I have is: I would like to create an application called MF1 as a based structure, it is a react applicant and would have a header,…
Reza
  • 493
  • 5
  • 14
3
votes
1 answer

Angular module federation: How to share classes/components from shell to MFE

I am working through a module federation PoC in angular (essentially Manfred's example) and am hoping to find a way to expose utility classes/directives/individual components, and any other code that doesn't necessarily rely on routing to…
iamaword
  • 1,327
  • 8
  • 17
3
votes
1 answer

Cannot use a web worker with my microfrontend

I just want to use a simple web worker in one of my single-spa react micro frontend. However when I initialize it, that doesn't work, the program cannot find the worker. I tried with the 2 following methods inside of my root.component.js: The…
Work
  • 31
  • 1
3
votes
2 answers

Vaadin micro-frontend css handling

I'm trying to implement microfrontend with Vaadin 14. I've managed to accomplish a working version thanks to the Vaadin official documentation and various examples on github, using WebComponentExporter. However I cannot find any information about…
3
votes
1 answer

Unit testing for micro-frontend react application

I'm trying to write unit tests for a react spa web application that uses micro-frontend architecture. My first step is to write unit tests for the application container. The application container react component uses a react-router containing a…
Alex
  • 1,293
  • 1
  • 13
  • 26
3
votes
4 answers

React Microfronends: How do I pass authentication and other information from one Front end app to another Front end app?

I am working on a system that consists of different backend microservices and a few inter-linked micro-frontend apps (all of them built with ReactJS). Below is my use case (for brevity, I'm just listing the frontend apps here and leaving out the…
Sriram Sridharan
  • 720
  • 18
  • 43
3
votes
1 answer

Can we split node modules library on route basis?

We have website on react and done code splitting using loadable, and all webpack optimizations. One thing is concerning we are using 70 npm library and It leads to make a big vendor chunks which we splitted using splitChunks webpack. What If we have…
3
votes
0 answers

Automated way for adding material ui prefix to styled components

Hello I'm using styled components and material-ui with custom prefix for material ui classes. However on my styles files I'm forced to import that prefix and before the name of material-ui class manually. Is there any way to automate it across…
Verthon
  • 2,937
  • 3
  • 20
  • 32
3
votes
1 answer

React Native mini-app / microapp structure

I'm trying to build a react native app which contains: 1/ A core app (which have multiple services) 2/ A mini-app to serve individual service above. The benefit of this approach is to: Reduce the size of the core app (which will be published on…
hrtlkr29
  • 383
  • 1
  • 7
  • 21
3
votes
0 answers

Single-Spa: Uncaught Error: application 'app1' died in status UNMOUNTING: unmountComponentAtNode(...): Target container is not a DOM element

I have registered 4 react applications using registerApplication of Single Spa. When I am navigating from one app to another I am seeing an error in console as well as an overlay on the browser. Uncaught Error: application 'app1' died in status…
Shreya Shah
  • 582
  • 1
  • 4
  • 17
3
votes
0 answers

Vue v2, Nested routes while using a microfrontend architecture using Webpack 5 Module Federation

I was wondering what would be the best way to import routes from app_02 to app_01 which is the shell app. One way could be adding children routes but I was wondering if there would be another way to do that so that we can do that so that we don't…
3
votes
3 answers

How to communicate securely between shell app and micro application(frontend) via pubsub

I have a shell application which is the container application that performs all the API communication. Also, I do have multiple Micro application which just broadcast the API request signal to shell application. Now, keeping the security in mind, as…
surendher
  • 1,374
  • 3
  • 26
  • 52