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

Blazor Server App - Modular Front-Ends (Micro-frontends)

We are looking for a way to get Blazor Server loading other Blazor Server projects. Our goal is to have a micro-frontend approach, where each micro-app is also a self-deployable app in itself and is also running from a base or shell application. Has…
Tom Day
  • 41
  • 3
2
votes
1 answer

Single Spa Micro fontend @emotion/react issue with multiple emotion/react loaded with they same version

I have a codebase structured as in single spa micro fontend in react. With mui5 and emotion/react for layouts and designs. Now in each micro frontend i have e separate package.json in it. With emotion/react installed in each micro fontend. My…
Romeo
  • 149
  • 8
2
votes
2 answers

Webpack external module in microfrontend/ multirepos angular gives an error on build

I have created a Angular project to call the microfrontend from other running angular project. I have import the module in my app by using webpack.config.js. It is working well locally but failed on production build. When I run ng build it throws…
2
votes
1 answer

Micro frontend react application - State Management using Redux - Data sharing

React (Typescript & Redux & Webpack) I'm developing a micro front-end application using react (typescript & redux & webpack) But I'm seeing blockers in sharing the data between container app & child apps, Above the planned structure, there roles…
2
votes
1 answer

With webpack module federation, can a container provide dependencies without consuming them?

Is there a way to instruct webpack to build and provide shared dependencies, making a root container application the default sharing host, without actually consuming said dependencies in a root container app? I'd like to treat a very light root…
numbers1311407
  • 33,686
  • 9
  • 90
  • 92
2
votes
1 answer

Nx Workspace: Angular CLI does not find file path after migrate to NX

I'm trying to migrate an Angular CLI app to Nx. My main goal is to turn my entire app into a big nx project and after that gradually split it into small remote apps and shared libs A execute the command ng add @nrwl/workspace and it moves my…
2
votes
1 answer

Issue with dynamic Module Federation in angular when one of the remote application is down

I am trying to implement dynamic module federation where I have a host application and few remote applications. Let's assume I have hyperlinks remote1 on my host App and when I click on remote1 link, I will dynamically load remote application App1…
Soadiya
  • 21
  • 1
  • 3
2
votes
0 answers

How to toggle between versions using lerna in microfrontend

I am using lerna to manage and publish my packages. I want to rollback to previous version in case if something went wrong and toggle between versions.How can we manage versions using lerna?
paras
  • 21
  • 4
2
votes
2 answers

Using Blazor Wasm as an app shell in piral

I chanced on Piral Framework for implementing micro-frontends and I wanted to implement it in my project. However, my application comes as a Blazor wasm project and my aim is to use this current project as my app shell. Is there any example on how I…
Xander Selorm
  • 558
  • 6
  • 18
2
votes
1 answer

Multiple importmap.json for different environments in single-spa

In am converting the existing project into a single-spa. This application support different environments- dev,qa,prod. My requirement is to use the different import maps json based on the environment. <% if (isLocal) { %>
arshad
  • 41
  • 8
2
votes
0 answers

Single-page application: Sign-in and Sign-out

have any of you used Azure authentication? Link: https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=react, I have a problem logging out. Logging in takes place in the Account microtext and the logout button is…
taaniel
  • 53
  • 5
2
votes
0 answers

C# Blazor Micro Front end framework code samples

I am looking at ways to make separate deployable "modules" in Blazor Web Assembly. Let's say you have 5 major components like Home, Products, Sale and Admin. Each of these would be separate deployable modules. Is there a way I can achieve this using…
2
votes
0 answers

Microfrontend using angular elements | how to include assets

I have built Microfrontend Architecture using Angular elements. In my angular application I have given the path of the image in the assets folder for one of my image. For eg., image in…
Shwetha
  • 903
  • 8
  • 15
2
votes
0 answers

How to run the single spa application on docker container

Can anyone please help us how to deploy an angular spa application. We are using a dockerfile to deploy.. The application is built and deployed successfully when i dockerize it but is giving the below error when i try to hit the main.js url Access…
2
votes
1 answer

Login/Authentication with OAuth2 and single-spa

I've started building a prototype for a front-end layer with single-spa. The layout is very similar to https://github.com/react-microfrontends, which means: Root config A navbar (React) Two apps (Both React) A Styleguide module An API module to…