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

Redirect not redirecting in a React application

I am trying to implement Redirect from react-router-dom and it's redirecting in the URL, but not re-rendering the corresponding component. import React, {useEffect, useState} from 'react'; import axios from 'axios'; import * as OnfidoSDK from…
Daniel
  • 14,004
  • 16
  • 96
  • 156
0
votes
1 answer

How do I rerender a different React functional component?

I am trying to solve how to rerender a different functional component. onComplete: function (data) { console.log("everything is complete"); console.log("this is the applicant id", id); let obj; axios …
Daniel
  • 14,004
  • 16
  • 96
  • 156
0
votes
1 answer

Vuejs microfrontend with SystemJS / Vuetify

I'm working on a POC to make a VueJS Portal Application that can dynamically load another VueJS sub applications. I couldn't work with Webpack Module Federation because I need to discover which Application I can "pull" at runtime and not at…
Saveriu CIANELLI
  • 510
  • 5
  • 17
0
votes
1 answer

Can't find module @angular-mf/core while creating example with Angular Micro Frontend Using Single SPA framework

Error: src/app/attack/attack.component.ts:2:29 - error TS2307: Cannot find module '@angular-mf/core' or its corresponding type declarations. 2 import { CoreService } from '@angular-mf/core'; ~~~~~~~~~~~~~~~~~~ src/app/result/result.component.ts:2:24…
0
votes
0 answers

Single-spa - is there a way to show loader while switching between micro frontends?

I am using single-spa for a project, it consists of one root-config and multiple vue micro-frontends, i need to show overlay from vuetify overlay, is there a way i can acheive from mount function?? root-config.js import * as singleSpa from…
0
votes
1 answer

Assigning publicPath to individual remotes at run time using the ModuleFederationPlugin

would like to ask your help regarding module federation. I am trying to set a remote from an external server but the loaded scripts from remoteEntry are loaded using the container url. new ModuleFederationPlugin({ name: 'container', remotes: { …
nucab
  • 771
  • 6
  • 12
0
votes
1 answer

Angular cross-domain dynamic component loader

I am investigating Micro-Frontend possibilities with Angular. I am looking into the feasibility of having independently the different parts of the UI served by their own HTTP server process but composed dynamically on the main UI; which is merely a…
0
votes
0 answers

Microfrontend with react, how to pass jwt token and userID

I have started working with microfronted.Riqht now I'm struggling sharing data between two apps. For example I have appA (container) and appB. AppA handles authentication, stores jwt token in localStorage. AppB sends requests to backend. For each…
Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67
0
votes
0 answers

http://localhost:5000/auth/google/callback 404 error

I am trying to get my backend development server and my microfrontend development servers working nicely together. The challenge for me is that the frontend is a microfrontend, and in my case it's two separate development frontend servers that need…
Daniel
  • 14,004
  • 16
  • 96
  • 156
0
votes
0 answers

jQuery in a micro-frontend application

we have a micro front end application implemented via different framework, Ember, React etc. Some of these rely still on jQuery and bootstrap and each micro app loads the specific jQuery/bootstrap JS combination All good, until we need to unload one…
0
votes
1 answer

Webpack 5: Error: Module "./Button.vue" does not exist in container

So I am playing around with the new Module Federation concept available in Webpack 5 now. And I get the following error when trying to import a component from a shared library (another vue app): container_entry:12 Uncaught (in promise) Error: Module…
poseidon23
  • 59
  • 3
  • 12
0
votes
1 answer

Deploy a package to different projects

In work we have a pretty complicated stack and situation, which could be somehow described as the following schema: The situation is: We have an old, poorly maintained PHP/AngularJs project which uses webpack for bundling. We also have another…
superuser123
  • 955
  • 2
  • 12
  • 24
0
votes
2 answers

How to Implement Micro Frontend in Angular (Alternative to Iframe)

we are trying to implement micro-frontend concept in Angular, where we have 2 angular applications App1 and App2 both separate project running individually on their own server. we want to integrate App2 inside a component of App1 on button click…
0
votes
1 answer

Is it possible to use single-spa (import map + SystemJS) and include TypeScript declarations?

I've created a few apps that follow the same pattern as the react-microfrontend projects listed on the Single-spa examples page. However, these examples are not using TypeScript. I am receiving a TS error when App2 tries to import a function that…
Eric
  • 3
  • 1
  • 2
0
votes
1 answer

A problem when I use webpack-5's libraryTarget:window

I'm using the single-spa to create my apps. When I load the micro-frontend app, I did not use SystemJS, Just as follows: export const runScript = async (url: string) => { return new Promise((resolve, reject) => { const script =…
Toulon
  • 1