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

How to communicate from 1 angular library to another?

I have this angular app which basically uses the concept of Libraries. I have 2 libraries named Lib1 and lib2 grouped according to microservice to which they serve. Now I import these libraries into the main app i.e. App1 and things was till now.…
Sam
  • 163
  • 1
  • 11
4
votes
0 answers

How to embed Angular application inside a React application?

I have an existing Angular app using TypeScript and Angular-CLI version 1.7. Now I want to embed the entire angular application inside of a parent react application. Such as when a specific route is reached in the react app, it should render the…
3
votes
2 answers

Using Webpack module federation to load remote React app gives TypeError: fn is not a function

I am developing microfrontend using Webpack 5 Module Federation. My host app is an Angular project. My remote app is an React. Both are using Typescript. My setup is like following: The React (remote) project In React project (which is the remote…
3
votes
2 answers

How to run Web Worker on Micro-frontend?

I'm using React, Webpack and adopting the Micro-frontend model. I have two simple apps as follows: App A (Shell app) App B (Remote app). App B uses a simple Web Worker as follows: new Worker(new URL("./myworker.ts", import.meta.url)) App B runs…
mikenlanggio
  • 1,122
  • 1
  • 7
  • 27
3
votes
0 answers

Angular Elements using ngx-build-plus and npm publish

I am trying to build an app that: contains angular elements publish this app in npm as a library Install the library in a different angular application use the custom element created in this new application I am half way there. I am able to…
Kshri
  • 414
  • 3
  • 16
3
votes
3 answers

NX MFE angular module federation not able to access remote micro front end

I have a shell and two MFE using NX module federation i.e. agency(a) and home(b). which is hosted in a different subdomains. I have a problem while trying to access. My module-federation.manifest.json { "agency": "https://a.abc.maindomain.com", …
Pranav MS
  • 2,235
  • 2
  • 23
  • 50
3
votes
2 answers

Module federation plugin SSR throws error "Cannot read properties of null (reading 'useState')"

I'm try to Connect my federated module from server side with React.lazy. My same issue in @module-federation/node repo (https://github.com/module-federation/universe/issues/493) I have custom React ssr server.…
3
votes
2 answers

Module Federation or Micro Frontend is not working in Next js version 12.2.0

I followed below steps to achieve module federation in next js. Create a component Insurance_Detail.tsx in repository cm-insurance-web inside src/node/components folder, which will be exposed. Below is the next.config.js file. const assetPrefix =…
3
votes
1 answer

React module federation micro frontend- webpack 5 public path auto is not working

In my react micro frontend project which uses module federation plugin remoteEntry.js path is incorrectly fetched and application crashes. With hard-coded publicPath: "http://localhost:3000/" in webpack things work as expected. But due to existing…
3
votes
0 answers

How to use multiple vue-router instances in Micro Frontends

I'm building a Micro Frontend app based on Vue using Module Federation with Vite with the following structure: Vue Host app: has a vue-router that will load the required micro frontends. the router has a base url named "/app". The path "/login" is…
Ismael Ordás
  • 370
  • 4
  • 12
3
votes
2 answers

Micro Frontend by Module Federation with react-router-dom v6

I'm start using Micro Frontend with Module Federation Plugin . Now i faced with some issues on building routing between my applications. My Host application have route 3 mfe apps. Each of them have own routing inside. Navigation in Host-app is…
3
votes
0 answers

I just want to know how can I use tailwind with single-spa

How can I create a global style guide that can provide tailwind functionality to all my frameworks connected with root config
3
votes
2 answers

How remove or unmount React App from a website properly

In my website, i have a button to launch an react app in a specific div. When i click upon it, i create a react root div and render the react app inside. What is the proper way to close it?
NadfriJS
  • 175
  • 1
  • 2
  • 10
3
votes
1 answer

In Nx + Angular monorepo architecture, where should I put testing helpers that are specific to just one library?

For context, we have an Angular + Nx monorepo with just one main app currently, but we plan to split it to a few separate microfrontends soon. We currently have just one main module, util-models, that contains all the interfaces describing all the…
JoannaFalkowska
  • 2,771
  • 20
  • 37
3
votes
1 answer

ngx-build-plus:externals not working for Angular 13

As Angular 13 is not producing UMD-Bundles any longer the command ng g ngx-build-plus:externals --project MY_PROJECT currently creates an invalid angular.json (pointing to the non-existing UMD-Bundles). Here is umd bundles referred in…
Karthikeyan
  • 183
  • 1
  • 8