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

Micro Frontends with ngrx store and effects

I am working on breaking a monolith app into micro frontends on angular 10. The micro frontends reside in separate repositories, i want to use ngrx store and effects in my micro frontends. I cannot do StoreModule.forRoot() in my micro frontend's app…
9
votes
0 answers

How to implement micro-frontends with dedicated Native Apps Team?

(Asking for a friend ;-) ) I'm working with Web (react) and Mobile (IOS, Android) teams. And I find that even with a microservices architecture we end up always doing duplicated work at the front end/client level. How to implement a microfrontends…
Txugo
  • 5,008
  • 5
  • 33
  • 40
9
votes
2 answers

Stencil: Namespacing custom elements’ names to avoid collisions

Our platform is built on a micro-frontend architecture with web components. We are using Stencil for some of them, this means we have multiple Stencil apps within one web page. Additionally, we have a UI library, also built with Stencil, which we…
lxg
  • 12,375
  • 12
  • 51
  • 73
9
votes
2 answers

How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?

I have a task. To have Micro Frontends with single-spa framework. portal/main application (which load all other js code by url) Micro Frontend 1 (react based) Micro Frontend 2 (react based) So my problem just one: I don't want to duplicate vendor…
8
votes
1 answer

React.Lazy not working when consuming Micro frontend with webpack 5 and plugin Module Federation

What is happening is that I am consuming a Micro front-end through module federation, but even using React.Lazy the bundle (remoteEntry) is loaded at the start of the application, without accessing the route where the component is being imported. To…
8
votes
2 answers

Gatsby Module Federation CORS error and eager consumption issue

I am trying to use micro frontend app from gatsby using Module Federation. When I try to call the component which is running at localhost:3001, getting CORS error. any idea how to solve this? Here is my gatsby-node.js const packageJsonDeps =…
8
votes
3 answers

Angular Module Federation BrowserModule

I am working on a module-federation prototype with webpack5 and the CLI11, mostly as described here: https://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/. Basically, I have a host…
7
votes
1 answer

Module Federation, React, and Apollo 3 warnings

I'm building an app with micro-frontends using webpack 5's module federation plugin. Everything was fine until I started adding react hooks into my remote app. At that point I received errors about "invalid usage of hooks", i.e. I discovered I had…
7
votes
2 answers

Angular MFE - WebPack5 - Module Federation - Image Path Issue

We are creating an MFE angular app using Module Federation WebPack 5 and ended up in an issue with the image source path. When we run the MFE alone, the image is loading(localhost:5000/assets/../angular.png) but when we run the host/shell app, the…
Keppy
  • 471
  • 1
  • 7
  • 23
7
votes
0 answers

How to deployed micro-frontend architecture when you have multiple app

I have multiples apps on the micro frontend architecture. I have used Lerna for managing multi-package repositories in a single repo. Here is the structure of my app. packages - main-app - feature-based-apps - feature-01-app -…
Asif vora
  • 3,163
  • 3
  • 15
  • 31
7
votes
0 answers

How to build micro frontend with Quasar?

I am trying to apply the concept of micro frontend and microservice into my current project. For frontend development, I am using https://quasar.dev/ and backend https://www.scala-lang.org/. I have the following scenario: I have 3 microservices…
softshipper
  • 32,463
  • 51
  • 192
  • 400
6
votes
1 answer

Webpack Module Federation Error ScriptExternalLoadError: Loading script failed

NOTE: I tried accessing this directly in the browser https://localhost:5007/accom-web/dist/js/assets/browser-bundle/remoteEntryTest.js and I'm served the remoteEntryTest.js file. This is my webconfig in host. This is webconfig of remote…
hendrixchord
  • 4,662
  • 4
  • 25
  • 39
6
votes
4 answers

Microfrontend Cannot find module error for module federation

Has anyone ever dealt with this issue before? I am currently following this tutorial This is how my App.tsx looks in button microfrontend: import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import Header from…
silverCloth
  • 73
  • 1
  • 1
  • 5
6
votes
4 answers

How to integrate flutter web build inside react app for specific route?

I have a requirement where i want to run flutter app for specific URL inside react application and for rest of the urls, react app will run. I will have flutter build folder and also will use browser's communication channel to pass data but is there…
ravi
  • 1,130
  • 16
  • 29
6
votes
2 answers

Unable to resolve bare specifier 'vue-router'

I have a micro-frontend project using vue 3. I have done yarn install and yarn serve:standalone. But I have an error like this this is my vue.config.js module.exports = { lintOnSave: false, configureWebpack: { devServer: { headers: { …
Nico Sauza
  • 339
  • 2
  • 7
1
2
3
38 39