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

Separation of micro frontend runtimes in JHipster

Assume we are having an microservice (MS) application containing of a bunch of micro frontends (MF). I have a lack of understanding how the MFs shall be separated and how they shall be integrated into "ONE" application? First lack of understanding…
cilap
  • 2,215
  • 1
  • 25
  • 51
2
votes
0 answers

single-spa shared pinia store among Vue3 microapps

I'm setting up a microfrontends architecture with single-spa, vue3 and pinia. I'm having some issue whereby I'm defining a store in a utiity microapp which gets imported in all other microapps. In a microapp I'm then creating a pinia as a plugin and…
Irith
  • 93
  • 14
2
votes
0 answers

Vue Microfrontend Lazy Loading Component

Hi I'm creating a new microfrontend app, with different micrfrontends. The hosting one have to load all the other mfes, but i need to load them after the login with the access token generated. I'm using webpack with vue-3 and modulefederation…
2
votes
0 answers

Module federation display a blank page for a few seconds even using Suspense

I have a 2 React micro-frontend applications, one host and one remote, I'm able to load the remote app into the host using Lazy loading and Module Federation, like this: const RemoteApp = lazy(() => import("Remote/App")); export const App = () =>…
CIOC
  • 1,385
  • 3
  • 19
  • 48
2
votes
0 answers

How to load components (containing assets) from npm package in a Single-Spa application?

I have an application build using Single-Spa and it consist of: Root Config App (hosted on http://localhost:3000) App1 (Angular application hosted on http://localhost:3001) App1 has a dependency (npm package) Dep1. Dep1 provides img-preview.png…
2
votes
0 answers

I want to use turborepo in a project where I don't want to use TypeScript is this possible?

I searched and read the docs but couldn't find the exact solution I also search for template and boilerplate. How to use turborepo without using typescript any comments about it guys? I don't want to use typescript because it's complicated for…
2
votes
0 answers

NG0203 error for deployed microfrontend project

I am working on microfrontend. using module federation. shell and the remote projects have different repositories and are deployed on different servers. below are the code shell project : calling the remote project through routing { path:…
2
votes
0 answers

React app rewired , Installing module federation with webpack

I am using below code to install module federation plugin on top of react app rewired : const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { webpack: function(config, env) { …
ProblemSolver
  • 636
  • 1
  • 8
  • 16
2
votes
1 answer

Modularizing the system independently - Micro Front-End or Monorepo (React)

Problem Well, start with the problem at hand. Several systems support several functionalities, whether they are applications or pages, and most of them independently. But for lack of planning, this system becomes a single and complicated project,…
rick
  • 554
  • 6
  • 18
2
votes
0 answers

remoteEntry.mjs file from ModuleFederation is failing to load on IIS

I developed a basic demo micro frontend project using nx,module federation with angular. When I am trying to host it on my IIS, the remote apps are working fine, but the host(or) shell application is failing to load. The remoteEntry.mjs file from…
2
votes
0 answers

How to modularize Javascript authentication code in MFE context in a VueJS

I'm working on a large,single-page VueJS application that's been broken down into several micro front-ends, and I'm currently implementing the authentication for communication with the orchestration layer and it's stumping me. The application is…
2
votes
0 answers

Authorization in Microfrontends

Currently transforming my application into a microfrontend approach. Therefore looking for an advice regarding how to handle the Authorization / Authentication for the Microfrontends. What is the best practice for Authorization / Authentication for…
2
votes
1 answer

Authorization Micro-Frontends with multiple / different tokens

Following software architecture: Architecture: There is one Microfrontend (MFE) which should be integrated in two different shells (Shell 1 & Shell 2). Each Shell for itself can consist out of only the MFE or several other components. Each Shell…
2
votes
0 answers

Angular module federation with multiple angular versions of angular core for shell and micro-frontends

I'm using angular module-federation library. I'm using a shell application that uses angular 13.1.1 version. There are few micro frontends that uses angular 13.1.1 version. There is one micro frontend that uses angular 14.2.6. The micro frontends…
2
votes
1 answer

How to manage state management across Micro front-end react apps?

Hello guys, I'm wondering what is your favourite approach for handling state management across micro front-end apps? For example: I've many run time apps as isolated standalone applications, each one represents a flow of two or three pages, then…