Questions tagged [micro-frontend]

195 questions
29
votes
3 answers

how to embed an angular app into another app?

My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses…
21
votes
2 answers

Vue.JS for a Micro Frontend approach

Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolithic SPA would get complicated. So we discuss the approach of „micro frontend“ architecture. The goal is to generate a…
René
  • 211
  • 1
  • 2
  • 3
13
votes
0 answers

Webpack taking ages to load page AFTER build is complete

We're using create-react-app (with react-app-rewired) on a very large monolith. We've done some improvements to the build time (got it down to approx 20s), but after the build is complete (following a yarn start) the application takes a good 2…
Apswak
  • 3,632
  • 4
  • 24
  • 52
8
votes
2 answers

How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?

I have a task. To have Micro Frontends with single-spa framework. portal/main application (which load all other js code by url) Micro Frontend 1 (react based) Micro Frontend 2 (react based) So my problem just one: I don't want to duplicate vendor…
7
votes
0 answers

Angular PWA in microfrontends

I have several microfrontends setup using an "app-shell" sort of app for the domain root and each microfrontend on the first path element. Each app is built like a standalone angular application using shared libraries to reuse common components and…
Øystein Amundsen
  • 3,130
  • 5
  • 37
  • 53
7
votes
0 answers

How to implement micro-frontends with dedicated Native Apps Team?

(Asking for a friend ;-) ) I'm working with Web (react) and Mobile (IOS, Android) teams. And I find that even with a microservices architecture we end up always doing duplicated work at the front end/client level. How to implement a microfrontends…
Txugo
  • 4,606
  • 4
  • 30
  • 39
7
votes
1 answer

Managing user session in Micro frontend

We are planning to adopt to micro frontend, our project is in Asp.Net Core MVC, in which we want multiple apps each owned by different team, where they can develop, test, deploy independently. what I am looking for is, if each component on front end…
BreakHead
  • 9,472
  • 33
  • 104
  • 161
6
votes
2 answers

Stencil: Namespacing custom elements’ names to avoid collisions

Our platform is built on a micro-frontend architecture with web components. We are using Stencil for some of them, this means we have multiple Stencil apps within one web page. Additionally, we have a UI library, also built with Stencil, which we…
lxg
  • 10,238
  • 11
  • 37
  • 60
6
votes
3 answers

Convenient micro frontend framework?

Which is the best approach/framework for micro frontend development? I have more than 5 apps based on angular, react and vue and want to display all 5 apps on a single UI. We have many micro frontend frameworks like single spa, piral, moisaic…
Zeeshan
  • 99
  • 3
5
votes
0 answers

Unable to resolve bare specifier 'vue-router'

I have a micro-frontend project using vue 3. I have done yarn install and yarn serve:standalone. But I have an error like this this is my vue.config.js module.exports = { lintOnSave: false, configureWebpack: { devServer: { headers: { …
Nico Sauza
  • 221
  • 4
5
votes
2 answers

How to share redux store in micro frontend architecture?

I am trying to create a small project to implement micro-frontend architecture following Micro Frontends article. I am creating multiple repositories for each MFE(Micro frontend) and also using Redux for the application. I have the following…
aditya81070
  • 477
  • 3
  • 17
5
votes
1 answer

Angular as Webpack External

I'm currently trying to lower build times by externalizing Angular dependencies through Webpack externals. So far, I have achieved this wihout problems for React and other minor libraries. If I just move '@angular/compiler' it also works, however…
4
votes
2 answers

Several instances of 'styled-components' initialized in CRA micro-frontend application

I'm running a micro frontend application with multiple React versions, each micro frontend repo is using lazy loading for dynamically loading its React version and it works as expected (Yay!) The micro frontend app is structured as follows: That…
Shimi
  • 980
  • 5
  • 14
4
votes
1 answer

Loading webpack bundle via script tag for microfrontend approach

I'm following a couple articles on how to implement a simple micro-frontend approach with React (here and here, see sample repos at bottom of question). It works perfectly when the two apps (the root app, and the subapp) are running in their…
Otto
  • 1,588
  • 2
  • 19
  • 26
4
votes
0 answers

"Can't resolve all parameters (?)" when importing a service from Webpack externals (single-spa)

I am currently developing a microfrontend application with single-spa which import a vanilla JS service inspired on this example through Webpack externals. This cache saves and shares information needed by the microfrontends. My problem comes when…
Oriol_IL
  • 130
  • 10
1
2 3
12 13