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
2
votes
1 answer

I want my nx monorep to allow css and sass styling?

I created an nx workspace and added CSS for styling but my project also uses SCSS files. How can I tell my nx workspace to accept SCSS files? Is there a command I can run?
codythedev
  • 61
  • 3
2
votes
1 answer

Microfrontend Invalid hook call

I have a microfrontend app with the following structure. I am trying to mount both marketing and company into container but keep getting invalid hook calls. They all use react 18.2, react-dom 18.2 and react-router-dom 6.3.0. Marketing loads fine in…
melv3223
  • 67
  • 5
2
votes
1 answer

The mat-select from MatSelectModule doesn´t render the options in microfrontend (ModuleFederationPlugin) angular

My application uses microfrontends usind the ModuleFederationPlugin from angular 13. The MatSelectModule, MatFormField and CommonModule and FormsModule are imported normaly in the microfrontend (MFE). import { CommonModule } from…
2
votes
1 answer

how to test one micro front end component in which other micro frontend component is being used using jest and enzyme

I have two micro frontends (written in react & typescript). dashboard MFE and Common MFE common MFE has several component which can be consumed by dashboard independently. eg. Notification component, loader component etc... MFE1 has…
micronyks
  • 54,797
  • 15
  • 112
  • 146
2
votes
0 answers

Angular Module-Federation MicroFrontend singleton service not working when deployed

This architecture is an absolute nightmare to work with, but hopefully someone is able to give me a hand. I'm using Angular 13, and @angular-architects/module-federation 14.2.0. I'll try to give a simplified version of the project I'm working…
2
votes
1 answer

Module federation display a blank page for a few seconds when a remote is unavailable

I have a micro frontend React application using Webpack module federation. My setup is an host application and a remote1 application. Since I configured "react" as a shared dependency between the 2 apps, I found out that if remote1 is unavailable,…
2
votes
1 answer

Multiple react micro front ends on one page

We're using nx to generate react applications, which we then use as micro front ends. Previously they have all been confined to separate pages and have worked flawlessly. Recently we've added an application that is meant to be included on all pages…
user1546010
  • 539
  • 1
  • 4
  • 17
2
votes
0 answers

Micro Frontend configuration - nx nrwl monorepo

Configuration stack: Angular 13, Module Federation, Nx Monorepo, ngx-build-plus According to: Angular Enterprise book by Manfred Steyer Error: ChunkLoadError: Loading chunk default-node_modules_rxjs__esm2015_internal_Observable_js failed. (error:…
2
votes
0 answers

Shared external Angular Library with single-spa

Is there a way to use an angular library as an alternative to single-spa utility module, imported with systemjs in the root application? I want to create a service within this shared library, that can be used by the angular micro-frontend apps as an…
2
votes
0 answers

How to share common flow in two React projects serving different clients?

There are two React frontend repos that serve two different clients. Both of them have the similar UI components and pages but they differ in logic at some places and have different APIs integrated. So response from API might differ for the same…
Saurabh Raj
  • 51
  • 1
  • 3
2
votes
1 answer

Pass data to router-outlet - problem when multiply routers with names

I have problem with pass data to router outlet. Usually I do something like below: and setConfig(component: { [key: string]: any }) { component.data = this.data; } and it works…
emka26
  • 433
  • 1
  • 11
  • 28
2
votes
1 answer

Angular microfront end infinite refresh

I am trying to build Angular Micro frontend using webpack module federation. I have added all custom webpack files to the application. All applications builds fine. Also, When I try to access the individual micro frontend from their respective path…
LilRazi
  • 690
  • 12
  • 33
2
votes
1 answer

How to use Vue 3 reactive object outside Vue ecosystem

I'm trying to pass global state created like this in micro front end applications. But the problem is that I have to "watch" for changes somehow in order to setState for example in a React app. globalState.js import { reactive } from 'vue' const…
2
votes
3 answers

React context between microfrontends

TLDR; How to use a single context between react micro frontends? The application is divided into multiple Microfrontends or react apps. Each of these is running on a different port. A container is hosting other Micrfrontends. Each one is a separate…
Mohit Saini
  • 21
  • 1
  • 3
2
votes
1 answer

What is best practice when it comes to react Microfrontend Architecture and React Router Best Practices

I am working on building a microfrontend POC in React using ModuleFederation My question surrounds best practices when it comes routing ['react-router-dom v6'] Currently, I have my application split into 3 separate microfrontends: Shell, Container,…