Microfrontends with single-spa

The repos referenced in this video are available here:

Please check the README in each repo to see how to run each app.

[Maveilthain]

The best real introduction for micro frontends, with practical examples and is not an abstract idea or buzz words. Thanks!

[akhmadfauzan]

Your explanation is really clear.
Thank you Ellis.
I hope, there is a next session for single-spa framework.

[AlejandroInforma]

Hi Michael, your video was Really ehlpful for me to understand how Singe-spa works, I have many questions that i would like to know if your still doing this kind of webinnar or you areable to do a spech for mi develop group in order to we understand deeply how this works on reall life, deployeed on a prod server, arroun 30 -60 mins

[ctrlshifteat]

Great content! Very helpful! Is there a video on maintaining state/props while navigating from one MF to another?

[TiboLacan]

Thanks a lot, really nice introduction

[avinashgurugubelli]

very Good insights, Thank you.

We have already implemented independent products/ app with different apps.
Say APP1 - Angular 8
Say APP2 - VU js
Say App3 - React.

If I want to get these apps to the micro front end.
1. Do I need to create the two separate APP using a single SPA?
2. How do we share the information between the APPs?
3. How do we share the common modules across the apps with the same technology to avoid the duplication of laoding?

[meihuala]

Hi, i tried to create single-spa using angular after run >>create-single-spa home --framework angular. After finished i tried to run it >>npm start. But i keep getting this errors "An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry['main'] should not contain the item"

[ashitashukla]

Hi, thanks for the explaination, my query is regarding is it possible achieve single spa of MF1 of AngularJs and MF2 Angular 9+ in vanilla JS root container or something like root-container will be Angular 10 or 13 and exposed MF's ie. AngularJs and Angular 2+ ? If it is possible please help to understand.

[brawnyvenky]

hi micheal, thanks for a detailed explanation. how do we lazy load the micro frontend based on navigations. As per the current solution right, all the microfrontends are referenced in imports array. Meaning they will be loaded by default into browser. Is there a way to dynamically load them at runtime.

[HaglerWafula]

Hi Michael. Thank you for the great explanation on single-spa framework. I'm however stuck on this error when trying to create-single-spa --framework angular. This is the error: EINVAL: invalid argument, mkdir 'C:\dev\spa-example\C:'. Looks like it cannot create directories for the angular application. Kindly help me with this issue. Thank you in anticipation.

[sethubsr]

Using single-spa how to give reference of node_module of child application in root

[pradeepgorai]

What all step we have to follow to migrate one react app to mf single spa?

[rkgummadi]

Greate tutorials ...your effort was wasted in teaching to some bunch of old jerks cant understand the importance of this ...but i have question do we always has to create the apps using the singl-spa framework route ...if we have to enable the existing applications with out modifying much how can we do that ..

[rastislavsvoboda]

hallo,
very nice presentation
Could you please, make quick example using vue3 and webpack5
all samples I've seen so far are using vue 2 and webpack < 5 (or other framework than vue)
and I really cannot make a working code with vue 3 and webpack 5

root-config, navbar, and 2 simple apps would be great ;-)
thanks in advance

[Paytida]

How did you integrate Bootstrap in React app ?

[jircdeveloper]

i, I'm working on BeyondJS, a framework that allows you to build microfrontends and microservices directly, without configuration. I really like if you have time to try it and let us know your feedback. Check it out if you have a couple of minutes.