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

Problem when dynamically registering routes in an application with microfrontends concept

I have an Typescript + Redux (with RTK) application using the microfrontends concept. All the steps for the construction came from this tutorial: Microfrontends tutorial. The main component is Microfrontend.tsx (omitted imports): interface Manifest…
2
votes
1 answer

How do I fix a Module Federation error when trying to use it in Next.js 10 project?

I am trying to develop microfrontends in NextJs 10 project as described by https://gist.github.com/jherr/dd10bc34448590a2661a0c6acbcc7e8a/revisions. But when I try to run it, both in my project and in the one with the example…
2
votes
1 answer

What is the best way to create micro frontend using Angular?

I checked few tutorials and videos on Angular Elements and NX. Personally, I found NX more powerful but still do not know all the available possibilities/libraries/frameworks to deal with micro frontends using Angular. Please suggest the best way to…
Nishant
  • 155
  • 11
2
votes
1 answer

Is there a way to render Angular app inside another HTML page?

I would like to know if there is a way to take the build files from an angular app and add it as part of another angular dist folder and launch that app inside a div in the parent app. Basically the micro frontend architecture. I have looking at…
2
votes
1 answer

What is the best way to develop Micro Front-end web app while hosting the micro front-ends independently

I have tried, Single SPA Web Components But in both ways, i couldn't find a way to develop and deploy the Micro Front-ends separately and then refer those deployed micro-front ends in a wrapper web app. In the examples i tried using the above…
2
votes
1 answer

Micro front end asset loading issue on base app

I've created two micro apps using Angular & React Js and base/container app in Angular. Micro apps are running on different ports and base app importing the main.js file from specific ports. I've achieved this functionality by following this…
2
votes
1 answer

Building micro frontends with compiled encapsulated Vue.js + Vuetify.js Components

We are developing a micro frontend approach using Vue.js + Vuetify.js to build our webclient. The whole distributed System consists of many micro services that perform some task and produces some data. The main idea is that each service also provide…
Serg
  • 825
  • 7
  • 13
2
votes
0 answers

Vue Web Component : Uncaught TypeError: Cannot redefine property: $router

I am facing issue while consuming Vue web component in a shell application and this shell application is also developed in Vue. My Vue web component has its own Vue router and inside router.js of this web component I wrote Vue.use(VueRouter).…
Atul
  • 521
  • 1
  • 7
  • 20
2
votes
1 answer

How to type a custom pilet api?

We are using the microfrontend framework piral. For our pilets we want to provide a custom api. Following the tutorials we came up with code like this export interface MyApi { example(): void; } export function createMyApi(): Extend { …
2
votes
1 answer

Using Deck.GL as Webpack external

I'm currently developing two different React applications which use Deck.GL to render two maps, each with a different type of layer. When using them as standalone they both work perfectly, however, when the two get mounted in the same parent…
Oriol_IL
  • 120
  • 1
  • 14
2
votes
1 answer

Micro-Frontend and Composite UI - Difference?

I'm pretty new to the whole 'microservices' subject and started reading something about Composite UI's. Now my question is, is there a difference between Composite UI's and Micro-Frontends? Or does it basically describe the same thing? Cheers
fabian177
  • 31
  • 3
2
votes
1 answer

Host application with dynamic imports

I have a react application with a Parent component and multiple children. Each children representing a different application with a manifest. src/ host/ Host.js app/ foo/ Foo.js manifest.json …
Marc Sola
  • 434
  • 4
  • 15
2
votes
2 answers

Micro-Frontends, Web Components, and Sharing Libraries

so I'm working on migrating my company's app to a micro-frontend approach. We are following the standard described in https://micro-frontends.org/. While under the hood everything is currently using React, we are wrapping things with Web Components…
craigmiller160
  • 5,751
  • 9
  • 41
  • 75
2
votes
2 answers

Alternative to Single-spa

We have huge enterprise application written in angularjs. Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade". So now we are creating a new application in angular, which means we…
sandeep
  • 2,862
  • 9
  • 44
  • 54
2
votes
1 answer

load native web component (non angular component) inside angular web component

I have an angular container component named AppComponent. I want to load my non angular component HelloComponent inside AppComponent. My actual goal is to load existing old components into angular 6 components. export class HelloComponent extends…
Mayur Patil
  • 303
  • 3
  • 17