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
5
votes
3 answers

Micro Frontend Architecture in React Native Application

I am creating a react-native application, And the application having many module like Login Module Payment Cart Product etc. So I want to follow Micro Frontend Architecture for each module. I have searched on internet but did not find anything. So…
Avinash A
  • 665
  • 1
  • 7
  • 22
5
votes
2 answers

Webpack Module Federation handling when the remote app is down/unavailable

I am currently exploring about micro frontend with Module Federation. I just forked a sandbox, tried it with success when the both modules available. It has 2 modules, app1 as the host, and app2 as the remote component. But as I think that each…
Dhana D.
  • 1,670
  • 3
  • 9
  • 33
5
votes
2 answers

Webpack module federation lazy loading remoteEntry.js

Am I able to lazy load apps' entry files when I am using React with ReactRouter? When I enter page there are many requests for remoteEntry.js files for each app I have. I do not want to fetch it at the beginning because of performance. I want to…
5
votes
0 answers

WebSocket connection to 'wss://localhost:3000/sockjs-node' failed:

I am working in a react application (Below Package.json) { "name": "seed", "version": "0.1.0", "private": true, "proxy": "http://localhost:8080", "dependencies": { "@ckeditor/ckeditor5-adapter-ckfinder": "23.1.0", …
H.abidi
  • 579
  • 1
  • 7
  • 16
5
votes
2 answers

Webpack module federation hot reloading betwwen apps

I'm starting to experiment with the micro frontend with webpack module federation. This is for a very particular purpose because in our company we develop big software like dashboards in react in Role base access control, and I would like each…
Minos
  • 216
  • 2
  • 11
5
votes
3 answers

"inject() must be called from an injection context" when importing angular app using module federation architecture

I am trying to implement the micro-frontend concept in angular using webpack5 module federation by following this example Module federation with angular, but i am facing this error I tried the solutions provided in this answer inject() must be…
5
votes
1 answer

Angular as Webpack External

I'm currently trying to lower build times by externalizing Angular dependencies through Webpack externals. So far, I have achieved this wihout problems for React and other minor libraries. If I just move '@angular/compiler' it also works, however…
5
votes
0 answers

Micro Front End Routing : Angular Router in Web Component/angular element

I am creating an UI application using micro front end architecture. I have three application : 1. micro-app-a (written in angular) 2. micro-app-b (written in angular) 3. shell application (written in angular) My micro-app-a has its own angular…
Atul
  • 521
  • 1
  • 7
  • 20
5
votes
0 answers

Dynamically created modules and components don't have access to parent injector

We currently have a problem where we want to create a module dynamically (moduleFactory.create(this.injector)). But the injector of the dynamically created module has not the providers from the parent injector. We wish to implement some core stuff…
5
votes
0 answers

I've looked at the single-spa site on how to create parcels, I get exceptions

I've been trying to implement single-spa parcels, but I've been getting the following exception index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error: was not passed a mountParcel prop, nor is…
user2875912
  • 109
  • 2
  • 10
4
votes
0 answers

Micro Frontend For Flutter Mobile

Is there any way to make microfrontend with Flutter Mobile. We have a big team and we wanna to use microfrontend with Flutter. I am not sure can we handle a big project with monolith application. We have goals to make a super app which is merging 8…
4
votes
2 answers

How to publish webpack on Vite properly

Im trying to publish locally a webpack on Vite to test micro front ends, but when I run my host app, it doesn't find the remoteEntry.js, and thats because when I try to access my remoteEntry.js, it doesn't exist. Does anyone know why? This is my…
pdro_99
  • 87
  • 1
  • 6
4
votes
1 answer

React Router Dom v6.4 doesn't allow history.listen (prior suggestions deprecated) with createBrowserRouter or createMemoryRouter

react-router-dom v. 6.4.2 doesn't allow history.listen as referenced in the code example below. This is for a mfe with module federation. In the code example using history.listen, if a link is clicked in the remote (loaded as mfe) then the memory…
4
votes
1 answer

Micro frontend using module federation with EmberJS

We would like to know the feasibility of WebPack module federation build system in Ember JS App for invoking federated code from Ember App to connect with other front end codebase developed in React JS or other SPA. Basically, we would to implement…
Gautam
  • 3,276
  • 4
  • 31
  • 53
4
votes
2 answers

Cypress mock module federation micro frontent

My application has an auth micro frontend which creates a singleton instance for sharing the auth state with all the micro frontends in the application. The auth class exposes some methods like so { getUser: () => {...} isAuthenticated: ()…
Will
  • 3,004
  • 29
  • 43
1 2
3
38 39