This was really a good explanation. Here you have explained about MicroFrontends and how it is consumed by the host in MonoRepository. It will be great if you explain how this micro font end can be injected in a host which is totally lying in different repository(may be in a separate video or please direct me if you have one already)
HI Vinothini, I have given example of a mono repo, but the deployment is done separately. You can simply put these two projects in different repos and deploy it separately. It would work similarly.
Will put that in the list! I haven’t used nx workspaces much… but have checked it out a bit. Would need to do some homework before creating a video on that… But be assured. I will make one video on that. ❤️
Great explanation, it would be helfull to know a way to use external components inside a template, so that way we can hace multiple micro frontentd inside a page like if the where local components
Really good explanation..can you please make a one video on how can we share assets in microfront components. Also font integration and scss integration
I think a separate static location can be used for the same. In current organisation we have just implemented that. A separate repo which deploys its static content to a s3 aws bucket. Our code (which gets deployed to another bucket) pulls static content and shows it in it.
wonderful Sir for this , I have a basic question , earlier there use to be some UI code which is common , so those common code when we migrate to mfe style . .do we need to write the common code in all respective mfe ? will it not impact the reuse of common code in this style . . I am missing someting pls guide
routing between two micro front end does not even work. (from MFE1 to MFE2 and vice versa) routing works only between shell and micro front end. Any suggestions?
Hi @GouravGunjan, In this approach we still not maintaining code base separately for different apps as we do in micro-service architecture. Is it the best practice we follow or we have any further approach to maintain different code base for different apps.
Good Explanation. I have one question, you loaded external module from 'localhost:3000' but what incase of deployment? we need to replace with which url here? Please explain
Thanks for the detailed explanation Also currently you have used a component through routing Please explain how will i add a mfe1 component as a child component in a shell app component
Hi Arsh, you can add a child component which can use routing to dynamically inject component. I am not sure yet if you can inject components directly. However, I saw there is away to expose a component - I didnt try doing it yet.
Video was really useful and can you say about libraries, services and interceptors used in this micro front end architecture using angular and then how to maintain the state of the application and also say till deployment of the application using GCP
I am not sure about deployment to GCP. But as you might be aware you need to serve both micro apps in same domain. So that you don’t run into cors issue.
Thanks for great content!! Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???
can you please share schematic to create new MFE within project , as in code there is shell and mfe1, and I want to add new mfe2, also is there any possibility about lazy loading for these MFE, kindly please guide
Yes bro , am new to micro front end , waiting for your reply....also make videos for deployment using docker in GCP and if possible add some git videos bro.
In the tutorial link I have provided, if you go last section. You can see that singleton instance of a service is shared across micro apps. That can be used as store.
Good explanation but need some more depth explanation in coding perspective. When we directly looking at the code not able to understand mfe1 and shell.. just need some explanation on that
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.
Yes. It is possible. In the framework mentioned in the video, there is configuration done, where remote component can be exposed with its own framework.
Hi Sir, I have been learning a lot through your Angular videos. Just a small request , can you please make a video series on how to make use of Google Developer tools from basics to advance, so that it give us thorough information and help us become a better frontend developer. Thanks in advance 🙂
I have error when I try to execute the comand npm install, It gives the following message: hile resolving: karma-jasmine-html-reporter@1.6.0 npm ERR! Found: jasmine-core@3.6.0 npm ERR! node_modules/jasmine-core npm ERR! dev jasmine-core@"~3.6.0" from the root project npm ERR! jasmine-core@"^3.6.0" from karma-jasmine@4.0.1 npm ERR! node_modules/karma-jasmine npm ERR! dev karma-jasmine@"~4.0.0" from the root project npm ERR! peer karma-jasmine@">=1.1" from karma-jasmine-html-reporter@1.6.0 npm ERR! node_modules/karma-jasmine-html-reporter npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project and more... by the way, i have installled the same version as the proyect, angular 14. how could i solve this error?
![[LIVE] : ONE ลุมพินี 91 | คู่เอก "คมอาวุธ vs อเล็กเซย์"](http://i.ytimg.com/vi/V0RkEfYFsgM/mqdefault.jpg)
This was really a good explanation. Here you have explained about MicroFrontends and how it is consumed by the host in MonoRepository. It will be great if you explain how this micro font end can be injected in a host which is totally lying in different repository(may be in a separate video or please direct me if you have one already)
HI Vinothini, I have given example of a mono repo, but the deployment is done separately. You can simply put these two projects in different repos and deploy it separately.
It would work similarly.
At 15:07 line no. 21 I had to use './flights.module' instead of just 'flights.module'
Thanks for feedback.
Really a good one!
Please post ideas to answer. How to design project architecture for UI developer.
Do you want me to cover this topic?
Love your content!
I would love to see some content on Nx workspaces and best practices around it.
Will put that in the list! I haven’t used nx workspaces much… but have checked it out a bit. Would need to do some homework before creating a video on that…
But be assured. I will make one video on that. ❤️
Really a needed question ..nice bro
It's great content with a short video. I'm expecting part 2 of the video
Coming soon!
Great video.
What is the VSCode extension you use that shows the types of variables beside it?
Great explanation, it would be helfull to know a way to use external components inside a template, so that way we can hace multiple micro frontentd inside a page like if the where local components
Superb bro, Thanks a lot! btw you look like Vijay Sethupathi ;) keep up good work
Thank you!
Really good explanation..can you please make a one video on how can we share assets in microfront components. Also font integration and scss integration
I think a separate static location can be used for the same. In current organisation we have just implemented that. A separate repo which deploys its static content to a s3 aws bucket. Our code (which gets deployed to another bucket) pulls static content and shows it in it.
I've got question, how can i deploy it to azure?
How can we create build all these multiple app together or run these multi applications simultaneously after build?
Really helpful video, thanks for sharing.
Hope you consider making the follow-up video with services in MFE
I am going to upload soon. I am going to use nx, which makes it even easier.
@@GouravGunjan can't wait 😌
I have posted the new video… please check it out
unable to install node modules
Great Video. Can you please explain how to deploy and call the respective js files
I have posted this in next video
wonderful Sir for this , I have a basic question , earlier there use to be some UI code which is common , so those common code when we migrate to mfe style . .do we need to write the common code in all respective mfe ?
will it not impact the reuse of common code in this style . . I am missing someting pls guide
you are amazing!!! THANK YOU!!!!
DOes this solution works for angular and react ? Meaning can I load a react app inside this angular app ?
I think you can load that. I have loaded react in normal angular.
routing between two micro front end does not even work. (from MFE1 to MFE2 and vice versa)
routing works only between shell and micro front end.
Any suggestions?
can we implement microfontend in Angular 10 project?
Hi @GouravGunjan, In this approach we still not maintaining code base separately for different apps as we do in micro-service architecture. Is it the best practice we follow or we have any further approach to maintain different code base for different apps.
Great Video, Thank you. I am facing a challenge with 2 different versions of the angular application. Could you do some helpful videos?
Hi need some urgent help can I reach out to you in any way
Thank for your explication
Welcome 🙏
Good Explanation. I have one question, you loaded external module from 'localhost:3000' but what incase of deployment? we need to replace with which url here? Please explain
Yes, you have to use the dns address here. Like if your component is hosted in xyz.com/componentRepo/componentX, you have use this address
Thanks for the detailed explanation
Also currently you have used a component through routing
Please explain how will i add a mfe1 component as a child component in a shell app component
Hi Arsh, you can add a child component which can use routing to dynamically inject component. I am not sure yet if you can inject components directly. However, I saw there is away to expose a component - I didnt try doing it yet.
Video was really useful and can you say about libraries, services and interceptors used in this micro front end architecture using angular and then how to maintain the state of the application and also say till deployment of the application using GCP
As mentioned in other comment. The tutorial link I have shared contain info about creating shared libraries and services.
I am not sure about deployment to GCP. But as you might be aware you need to serve both micro apps in same domain. So that you don’t run into cors issue.
Thank you for this video
My pleasure
@@GouravGunjan can u make video on commonly used rxjs
Hi Gourav, nice video. Is it possible to communicate between shell and remote and vice versa.
Yes, I have posted other video on this
well explained. thanks.
Thanks for great content!!
Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???
I am not that much into react js. But sure i will try to create something like that
can you please share schematic to create new MFE within project , as in code there is shell and mfe1, and I want to add new mfe2, also is there any possibility about lazy loading for these MFE, kindly please guide
Hi Gourav, Do we need to maintain single repositories for all modules, is it possible to have a separate repository for each module?
Can you provide the reference link also in the description...
I have added the tutorial in description. Do you require something more?
Yes bro , am new to micro front end , waiting for your reply....also make videos for deployment using docker in GCP and if possible add some git videos bro.
Please share full code
Nicely explained brother 😊
So nice of you
Also provide how to use store concept in Microfront end architecture
In the tutorial link I have provided, if you go last section. You can see that singleton instance of a service is shared across micro apps. That can be used as store.
Nice Explanation.
Thanks! :)
Hi, It's awesome post. Can you provide the shell and mfe1 from scratch. Also post the communication between mfe's and mfe to shell
thanks advance.
Hi, thanks for watching the video... I will put this in bucket for future videos...
Thank you so much for this informative video i got a lot to learn from that ❤
I have some doubts. can you please tell how can i connect with you
Great 👌
Thank you
Good explanation but need some more depth explanation in coding perspective. When we directly looking at the code not able to understand mfe1 and shell.. just need some explanation on that
Will try to create another video on that.
what theme are you using?
I dont think I am using any theme in this project.
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.
Yes. It is possible. In the framework mentioned in the video, there is configuration done, where remote component can be exposed with its own framework.
thank you
Hi Sir, I have been learning a lot through your Angular videos. Just a small request , can you please make a video series on how to make use of Google Developer tools from basics to advance, so that it give us thorough information and help us become a better frontend developer. Thanks in advance 🙂
Sure!
@@GouravGunjan waiting for your Google developer tools course 🙂
Great video, would be nice to also have a link to source code :)
The tutorial link in description has a repo link.
Waiting for Part 2
Hi, thanks for showing interest. Is there something you would like to focus on second part? :)
Why so complexity? When its easy to embed a micro ui using an .
Good content but please remove any kind of background music. Unable to concentrate and listen properly 🙏
Nice content but the music is terribly annoying and distractive.
Oh, okay. I will try to reduce the music even further. I have kept it a -32dB!
voice is not good . pls improve and upload it again
I have error when I try to execute the comand npm install, It gives the following message: hile resolving: karma-jasmine-html-reporter@1.6.0
npm ERR! Found: jasmine-core@3.6.0
npm ERR! node_modules/jasmine-core
npm ERR! dev jasmine-core@"~3.6.0" from the root project
npm ERR! jasmine-core@"^3.6.0" from karma-jasmine@4.0.1
npm ERR! node_modules/karma-jasmine
npm ERR! dev karma-jasmine@"~4.0.0" from the root project
npm ERR! peer karma-jasmine@">=1.1" from karma-jasmine-html-reporter@1.6.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project
and more...
by the way, i have installled the same version as the proyect, angular 14. how could i solve this error?