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
4
votes
0 answers

How to share common utility files/functions , common css or design systems in module federation using react?

I am new to module federation , and I am trying to federate my monolith project into multiple Micro frontends but I have some common utility functions , global css that are being used across the application . I have searched online but did not get…
YepMe
  • 159
  • 2
  • 11
4
votes
0 answers

How to use common dependencies between multiple modules in React micro frontend

Hey I am using react microfrontend in my react project with webpack module federation. After changing folder structure as per microfrontend structure facing some difficulties to handle common dependencies of modules. Getting Following Error: …
4
votes
0 answers

Micro-frontends react and flutter

I have multiple micro-frontends built in React. I want to create another micro-frontend with flutter and integrate with react app shell. Is it doable? Looking forward to your thoughts. Thanks
4
votes
3 answers

Inject Environment Variables at runtime with Webpack Module federation

The question about injecting Environment Variables after bundling with Webpack is already asked and answered. The answer is always based on loading the updated Environment Variables inside the index.html file. But when using Webpack Module…
4
votes
0 answers

Angular module federation load remote module - Loading chunk failed

i'm developing 2 angular project ( different repo ) started on port 4200: project 1(host) routing { path: 'contact', loadChildren: () => loadRemoteModule({ remoteEntry: 'http://localhost:3000/remoteEntry.js', remoteName: 'mfe1', …
Fearlezz
  • 51
  • 1
  • 3
4
votes
1 answer

Micro Frontend - A platform with a different configuration has been created. Please destroy it first

I am trying to build a POC for Micro Frontend using Angular and Webpack Module Federation. In this, I have created a shell app and another mfe1 app and rendering that mfe1 on a specific route hit and it is working as expected and rendering the app.…
Sai M.
  • 2,548
  • 4
  • 29
  • 46
4
votes
0 answers

Integration of Grafana dashboards in JS/React web application components

Is it possible to integrate Grafana dashboards in JS/React web application components? We are searching for an alternaive to an IFrame integration, e.g., using DOMs in React. We are using a micro frontend technology that is written in…
Matzka
  • 125
  • 1
  • 13
4
votes
1 answer

how to share data across different micro apps in single-spa

I understand how to pass custom props to different micro apps when using single-spa but I want to know how I can take the output of an api call form app1 and use it in app2. app1 is using react-redux and app2 will be using react hooks. import…
shorif2000
  • 2,582
  • 12
  • 65
  • 137
4
votes
3 answers

sharing react between microfrontend bundles without CDN

I am building an app using a microfrontends architecture with the Single-Spa framework. I have: A root config web app: Defines the layout of the apps and includes each microfrontend as an NPM dependency N Microfrontends: React apps which are loaded…
sam
  • 2,469
  • 8
  • 37
  • 57
4
votes
1 answer

How to implement i18n into a micro-frontend application using Module Federation

What would you recommend for implementing i18n in a module federation micro-frontend next.js app? At the moment (just starting) I got it working with react-intl by declaring the provider in the _app.tsx
4
votes
2 answers

Live Reload by Webpack-Dev-Server when editing a Federated Module

I am working on an app leveraging micro-frontends with the Webpack Module Federation. My "host" app provides a login screen and a layout with menu, header and footer. My "modules" are sections of my app that accessible by a click on a menu's…
4
votes
1 answer

Loading webpack bundle via script tag for microfrontend approach

I'm following a couple articles on how to implement a simple micro-frontend approach with React (here and here, see sample repos at bottom of question). It works perfectly when the two apps (the root app, and the subapp) are running in their…
Otto
  • 1,675
  • 2
  • 19
  • 30
4
votes
3 answers

How do you share state in a micro-frontend scenario?

A first idea would be cookies, yet you can run out of space really fast.
dragosgn
  • 61
  • 1
  • 2
  • 4
4
votes
1 answer

Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

I have stucked with a issue, Below is the scenario : I have developed a vue application (my-admin micro app) which has 4 - 5 screens/components (manage user , manage notifications ,manage roles etc) and i created a router.js where i have wrote…
Atul
  • 521
  • 1
  • 7
  • 20
4
votes
0 answers

What is the purpose of created folders in dist/ folder in StencilJS?

I am working with web components using stenciljs. Its great library for creating web components that can we re-use anywhere.I wondered how stencil compiler works. I mean when I create a build of any component its creating multiple folders inside…
Kishan Oza
  • 1,707
  • 1
  • 16
  • 38