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

How to export a function from single-spa util module and import the same function in single-spa micro front end?

I have the following 3 repositories. root-config -> https://github.com/sravan464/web-root-spa react mfe -> https://github.com/sravan464/mfe-react-1 vanilla utility module -> https://github.com/sravan464/single-spa-util-module-vanilla I am trying to…
sravan ganji
  • 4,774
  • 3
  • 25
  • 37
0
votes
1 answer

application 'react app1' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #react-app1 not existed while react app1 loading

I am using Qiankun as a micro-frontend-servlet and need someone, who has a bit of knowledge around that tool, who can help me with the following problem: My Master-Application, as well as all Micro-Applications run on a react-app, which have been…
mgru1
  • 29
  • 1
  • 6
0
votes
1 answer

Micro frontends and micro services

We have a set of microservices which all perform a specific function. To configure, operate and monitor these services, we have a single web application. This is currently still a monolith. The microservices are deployed at our customers, but not…
Pieter
  • 3,339
  • 5
  • 30
  • 63
0
votes
0 answers

How to use storybook remotely?

I am currently working on multiple projects(that means each project is in different repo) which is using storybook(one common repo which is getting redundant in each project). I want to publish or do want to place that somewhere on the cloud so…
0
votes
1 answer

sub app lazy loading within an angular micro front end in single-spa

I'm using single-spa library to create micro-front-ends. I'm trying to implement lazy loading in one of microfrontend. Normal routing is working fine but when I try to lazy load a module in one microfrontend it doesn't load and gives…
0
votes
0 answers

Presenting multiple/separate React web apps into one

Over the course of several years we've collected a handful of React web apps, each hosted somewhere and each having their own source code repository. Now we are looking to sort of "consolidate" these various web apps into a single place. The effort…
AlvinfromDiaspar
  • 6,611
  • 13
  • 75
  • 140
0
votes
0 answers

How to create a self-contained service with microfrontends which needs to embed 100+ other microfrontends?

we're currently trying hard to get into microfrontends and self-contained services. I would say that we understood in some way the base concept.... But we run into a problem if we're talking about our calendar: The calendar is for us a…
0
votes
1 answer

How to switch between 2 single-spa react applications using js only?

I am developing a single-spa react application. I am using navigateToUrl function from single-spa to switch from app A to app B. But after switching to app B, app A is still mounted in my DOM. How do I forcefully unmount that?
0
votes
1 answer

Add react component in single spa microfrond end root-config

How can I add a react and add a component in the root-app ( Ex link : Link)? I have tried to import the react and react-dom and add the component but it's not working and the app gets closed.
0
votes
1 answer

How to access main.js file n angular project on deployment over cloud

I am working on an angular project for this single spa micro frontend application, { "imports": { "app1": "http://localhost:4201/main.js", "login": "http://localhost:4204/main.js", } } I have deployed my app1 on cloud…
0
votes
1 answer

Single Spa: check for the user permissions before routing

I am working on a single-spa application, which basically has a route mapping to the other MFE (micro frontend). I do have access to the source of some of the MFE, but I do not own one MFE (let’s say “A”) before routing to which I should check the…
0
votes
1 answer

Typescript setupProxy.js whit custom webPack config

I have to set the header Access-Control-Allow-Origin to * in my setupProxy.js in a typescript React app. but I can't. I'm not sure if setupProxy.js (ts) in typescript is suported. But I need it for a microfronted application. Here is my custom…
0
votes
0 answers

In single-spa, how do I prevent a utility module from unmounting on route change?

I am developing a micro frontend app using single spa and react. I have created a utility module for data sharing and have loaded it in the root url /. But each time I change the application URL, the utility module is getting reinitialized. Is there…
0
votes
2 answers

How to load web applications on runtime?

I'm going through the concept of Micro frontends for the past few days. In Micro frontends, we create bundles of all applications wherein each bundle represents a separate web application and finally we write logic to communicate with these bundles…
VIK6Galado
  • 650
  • 14
  • 32
0
votes
1 answer

White page deploying react app with webpack in IIS Server

I'm trying to deploy a react web application based in microfrontends using ModuleFederationPlugin and webpack, but when I try to deploy one of microfrontends in isolation I get a white page without errors. My webpack configuration to…