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
It's a good question. It might be worth asking in the single-spa Slack channel to get a more thorough response, but in our MFE setup, we do not share state between MFEs. They are separate domains. I will say that it is appropriate for the root config to pass global props to MFEs (eg. auth info like access token).
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"
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?
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.
The default behavior in single-spa is to lazy load modules based off your activity functions. I'm not sure what imports array you're referring to, but the modules you want to lazy load should be import maps.
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.
Yep. Root config should be in vanilla JS and fairly "dumb". All the root config really does is provide the index.html page and routes MFEs to URLs. As far as the frameworks for each MFE, the sky is the limit for the most part.
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.
You can just do "npm i bootstrap" and then import its CSS at the top of your app and use Bootstrap's classes to create components or use already made React Bootstrap libraries such as "react-bootstrap" that already created all those Bootstrap components as React components.
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.
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 ..
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
The best real introduction for micro frontends, with practical examples and is not an abstract idea or buzz words. Thanks!
Your explanation is really clear.
Thank you Ellis.
I hope, there is a next session for single-spa framework.
Great overview for single spa
Beautifully explained.. thanks
really good presentation.
excellent tutorial
Useful Session. Thank u
Thanks a lot, really nice introduction
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
Great content! Very helpful! Is there a video on maintaining state/props while navigating from one MF to another?
It's a good question. It might be worth asking in the single-spa Slack channel to get a more thorough response, but in our MFE setup, we do not share state between MFEs. They are separate domains. I will say that it is appropriate for the root config to pass global props to MFEs (eg. auth info like access token).
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"
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?
Hi Avinash,
I am experiencing a similar use case. Did u get any solution for this?
Hi I'm facing similar issues. did you get any solution?
@@jatinpartaprana60 Hi I'm facing similar issues. did you get any solution?
Hi, did you get any solution? I'd like to hear how you achieved that!
Use a single spa module and your app will get share state from it
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.
The default behavior in single-spa is to lazy load modules based off your activity functions. I'm not sure what imports array you're referring to, but the modules you want to lazy load should be import maps.
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.
Yep. Root config should be in vanilla JS and fairly "dumb". All the root config really does is provide the index.html page and routes MFEs to URLs. As far as the frameworks for each MFE, the sky is the limit for the most part.
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.
Using single-spa how to give reference of node_module of child application in root
What all step we have to follow to migrate one react app to mf single spa?
How did you integrate Bootstrap in React app ?
You can just do "npm i bootstrap" and then import its CSS at the top of your app and use Bootstrap's classes to create components or use already made React Bootstrap libraries such as "react-bootstrap" that already created all those Bootstrap components as React components.
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.
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 ..
you have npm helper packages for frameworks like angular, react, vue. for angular you can add to existing project using ng add single-spa-angular
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
Your communication is not clear