Micro-Frontends Course - Beginner to Expert

  Рет қаралды 391,040

freeCodeCamp.org

freeCodeCamp.org

Күн бұрын

Don't know what a Micro-Frontend, but you've heard the buzz and you want to learn it. Let me take you from just starting out, to understanding asynchronous loading, error handling, shared state, cross platform micro-frontends, how to route multiple applications together, and even how to test Micro-Frontend code.
✏️ Jack's channel: / jackherrington
💻 Code: github.com/jherr/micro-fes-be...
⌨️ (0:00:00) Introduction
⌨️ (0:01:06) Micro-Frontend demo
⌨️ (0:08:13) Why Micro-Frontends?
⌨️ (0:11:50) Why Module Federation?
⌨️ (0:20:16) Asynchronous Loading
⌨️ (0:24:56) Error Handling
⌨️ (0:31:42) Server Setup
⌨️ (0:38:36) Sharing Functions
⌨️ (0:50:15) Nomenclature
⌨️ (0:51:35) Sever Cart Setup
⌨️ (0:59:28) Sharing State
⌨️ (1:02:42) Sharing the JWT
⌨️ (1:13:53) Sharing the Cart
⌨️ (1:26:48) State Sharing Alternatives
⌨️ (1:27:21) Finishing the Cart
⌨️ (1:29:36) Cross-Platform Micro-Frontends
⌨️ (1:39:02) Micro-Frontend Routing
⌨️ (1:48:24) Unit Testing
⌨️ (1:51:53) End-To-End Testing
⌨️ (1:54:55) What's Next?
#microFrontends #moduleFederation #react #solidjs
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 259
@rival-slays
@rival-slays 2 жыл бұрын
In case anyone gets blocked when trying to add React Router: If you just install router as shown in the video (with npm/yarn) without specifying a version, you'll get React Router v6. This version has replaced the Switch component with a Routes (not Route) component but it behaves the same and also changed the "component" prop on Route to be "element". Route's "element" prop requires the component to be passed in as "" not just PDPContent like in the video.
@ayimkanrayapova1918
@ayimkanrayapova1918 2 жыл бұрын
omg, i was struggling with the element={} a lot, thanks for this comment! you accidentally fixed my code which is not even related to this video
@MrThurobrand
@MrThurobrand 2 жыл бұрын
Thank you for this. I spend a good couple of hours on this.
@s0ulweaver
@s0ulweaver 2 жыл бұрын
Oh you life saver.. ❤️
@davidlyj
@davidlyj 2 жыл бұрын
Could you reply with the snippet of code that you used to fix the issue please?
@novalentino94
@novalentino94 Жыл бұрын
gosh thanks! been hours stuck in this part, lol
@TheMolzz
@TheMolzz 2 жыл бұрын
Thanks Jack for the quick working implementation of micro front end in the first 8mins of this video! awesome. will follow the whole vid.
@1235niki
@1235niki 2 жыл бұрын
Thanks for doing this comprehensive tutorial Jack.
@sergmayakov9663
@sergmayakov9663 Жыл бұрын
Incredible content , dude you are changing a shape of such channels
@y-e-z
@y-e-z 2 жыл бұрын
After watching demo part at the beginning here is my opinion: This may be very beneficial for large projects that are developed by multiple teams but I think nx workspaces provides similar benefits more conveniently for projects that are developed by single team. Thanks for the high quality free content.
@uziboozy4540
@uziboozy4540 2 жыл бұрын
The point of micro frontends is that each microfrontend can be developed independently. Nx workspaces doesn't solve that issue.
@hugodeiro
@hugodeiro 2 жыл бұрын
Extremely good! Really enjoyed that!
@learner8084
@learner8084 11 ай бұрын
This is a great video. Thanks Jack Herrington.
@habbex
@habbex 2 жыл бұрын
Thank you very much for this video , I'll be looking forward to learn more from you ❤
@timmyers9798
@timmyers9798 2 жыл бұрын
Mind blown.... thanks alot Jack.
@syllight9053
@syllight9053 2 жыл бұрын
I will remember to donate to fCC when I'm old enough to get a job!
@azhagurajaallinall126
@azhagurajaallinall126 2 жыл бұрын
We will bro,we will.. November 17 2021 9:17 pm
@rendoesmath
@rendoesmath 2 жыл бұрын
I already earned my first salary going to donate to FCC!
@rubenverster250
@rubenverster250 2 жыл бұрын
I've been programming for.... 2 years... I still haven't donated... This made me feel so bad. I started on FCC. So I know where I'm blessing a part of my salary end of the month ^_^
@selvakumars6487
@selvakumars6487 10 ай бұрын
​@@rubenverster250I think it is a reminder for all the adults to donate something to FCC!!
@rubenverster250
@rubenverster250 10 ай бұрын
I've been bad... I still haven't donated. I'M GOING RIGHT NOW! @@selvakumars6487
@MsPrakhar12
@MsPrakhar12 Жыл бұрын
So great explanation. You're a great teacher. 💯
@claudioseccia9380
@claudioseccia9380 Жыл бұрын
This tutorial is A W E S O M E!!! Thanks Jack!!!
@balajikesavan9933
@balajikesavan9933 2 жыл бұрын
Great going , I always like your videos , Thanks 😊
@dhanubhardwaj6935
@dhanubhardwaj6935 2 жыл бұрын
Interesting topic and Best part about is patterns of sharing the components . 👍
@Zangeronimo
@Zangeronimo 2 жыл бұрын
amazing, really super cool, tks Jack
@admiralicic
@admiralicic 2 жыл бұрын
If I could, I'd hit 'Like' for this 10 times, awesome content, thank you :)
@DouglasBarraza13
@DouglasBarraza13 2 жыл бұрын
Thanks for all materials about micro-frontends
@mardivestertamma8750
@mardivestertamma8750 2 жыл бұрын
Thank you for the nice explanation and great content sir 👍👍👍
@anthonyp2259
@anthonyp2259 2 жыл бұрын
Awesome !!! Thanks for the video.
@fredericoluisfigueira9053
@fredericoluisfigueira9053 Жыл бұрын
Really good video thanks Jack Herrington, there was a little cut on the video at 18:00 min, you're explaining about module federation
@shashikantmarskole
@shashikantmarskole 2 жыл бұрын
Thank you so much, it's very informative and make it easy to understandable. thanks 😊 👍👍👍
@jr-hp7er
@jr-hp7er 2 жыл бұрын
That awesome Jack ...❤️❤️
@rv-web
@rv-web 2 жыл бұрын
Thanks a ton for such course on FE.
@faustaleonardo
@faustaleonardo Ай бұрын
Thanks. Nice demo!
@paulavictoriasuarezblanco1745
@paulavictoriasuarezblanco1745 2 жыл бұрын
Thank you so much! I love it the course
@RostyslavNikolaienko
@RostyslavNikolaienko 2 ай бұрын
Awesome lecture!
@7708Abby
@7708Abby 2 жыл бұрын
Hello…. Excited to learn micro frontend and add the experience as a frontend developer… thank you for this 😊
@muhammedozalp
@muhammedozalp Жыл бұрын
Thank you for this great tutorial
@vasiloconnell281
@vasiloconnell281 Жыл бұрын
Отличный материал. Спасибо!
@narcissisticnarcissus4956
@narcissisticnarcissus4956 2 жыл бұрын
People, remember to subscribe to his channel. He is a great educator!
@kamertonaudiophileplayer847
@kamertonaudiophileplayer847 2 жыл бұрын
I started to use Micro-Frontends back in 2000. I am glad that the approach got popularity now, so you can learn it over youtube now. Thanks for getting people familiar with the architecture.
@EricEGunes
@EricEGunes 9 ай бұрын
webpack 5 released date is 2020-10-10 !! what were you using back then ?
@kamertonaudiophileplayer847
@kamertonaudiophileplayer847 9 ай бұрын
@@EricEGunes I used a proprietary implementation which was converted to OSS later.
@Al-no2fm
@Al-no2fm 2 жыл бұрын
This is what im learning about bigger companies. You're very much a small cog in a BIG machine. Which is nice because you can apply for jobs and not worry thinking you need to be some full stack wizzard
@Meleeman011
@Meleeman011 2 жыл бұрын
Yeah I'd rather be cool lol, you're more easily passed around as a full stack dev, always a new job, always something new to do, new to learn and you can really be powerful in an organization, as you can literally engineer systems at a higher level
@francescos7361
@francescos7361 Жыл бұрын
Great code , I love it .
@Hipocondriax
@Hipocondriax 2 жыл бұрын
Thank you very much!
@souledone5721
@souledone5721 Жыл бұрын
For those who are worrying about error boundary not working it’s just that the error overlay appears but the error boundary works!! Disable the overlays by making the display as none. 30:41
@mnsdali
@mnsdali 6 ай бұрын
love this course
@IceQub3
@IceQub3 2 жыл бұрын
Hi thanks for the greate video Pnpx isnt just a windows thing. Its great for all platforms because it uses caching and symbolic links to resuse dependecies on your machine. So you wont need to use 30% of your hard drive just for node_module folders. There are more nice features but the caching and linking one is the think that makes pnpm stands out of all the others
@mahendranath2504
@mahendranath2504 2 жыл бұрын
Thank you so so much 👍🏼🎉🙏⭐❤️
@husseinhasan7758
@husseinhasan7758 Жыл бұрын
I definitely going to send you a special fidget spinner gift in the near future for this AMAZING tutorial!!! LOTS OF THANKS.
@nuwanthuduwage6869
@nuwanthuduwage6869 2 жыл бұрын
Jack this is a very good explanation and thank you for sharing knowledge, can you put the video link of the Error Handling scenario of loading the older version with the help of NPM and error boundaries. I couldn't find it. Appreciate it if you can mention the video link with us.
@yaolegoleynik
@yaolegoleynik 2 жыл бұрын
Exсellent work! Thank you!
@sourav_-_7038
@sourav_-_7038 2 жыл бұрын
this is an exotic topic. thanks for the videos.
@Meleeman011
@Meleeman011 2 жыл бұрын
Exotic is a good word for it, god help any startup or small organization doing this
@leodesiatnykov4031
@leodesiatnykov4031 2 жыл бұрын
Top-noch skills. Many thanks
@sujahathsiddeek378
@sujahathsiddeek378 2 жыл бұрын
excited to learn this
@marconen.2412
@marconen.2412 2 жыл бұрын
Thanks Jack for this awesome content! Just quick question: I am getting CORS issue with my application. I cannot get product to home or everywhere it is supposed to be displayed due to CORS which blocks the request. Any idea? Thanks!
@rabithbo7089
@rabithbo7089 Жыл бұрын
A very nice tutorial
@1LifeStudio
@1LifeStudio Жыл бұрын
Can I use the component exposed from react project in SSG builder like Astro?
@mikhail6193
@mikhail6193 Жыл бұрын
thanks for mentioning dio vs code extension ❤❤❤running to 👀it asap )
@omarakki705
@omarakki705 2 жыл бұрын
Big thanks for you
@t_walker000
@t_walker000 2 жыл бұрын
Hi thanks for free lessons Please post lessons about Front End dev more
@DaddySergeant
@DaddySergeant 2 жыл бұрын
wow now I can use microservices with micro-frontends intresting
@seenahaqverdy1492
@seenahaqverdy1492 2 жыл бұрын
Amazing 👌
@smithdragon6477
@smithdragon6477 2 жыл бұрын
I think we can use a gateway to put all the service together .so in this way we don't need to integrate other service to the home router service
@shashankkulkarni993
@shashankkulkarni993 2 жыл бұрын
thank you nice information
@demno2258
@demno2258 7 ай бұрын
Great... clear
@kirillpavlovskii8342
@kirillpavlovskii8342 2 жыл бұрын
So great course
@ErlWable
@ErlWable 2 жыл бұрын
This is gold
@ssosso793
@ssosso793 Жыл бұрын
hello. thank you for the good lecture I am trying to communicate with restapi by configuring the client and server separately. How should the client build/deploy? When building in each directory and distributing the built output file ./dist files, can I distribute them together with the server files? I'm curious about the process of how to do the build distribution method!
@7ronal
@7ronal Жыл бұрын
¡Gracias!
@svmagi
@svmagi 11 ай бұрын
Hi Jack, How to handle the session between different microfrontend along with time session time out for certain minutes. An example will be a great to watch
@timehrhardt8410
@timehrhardt8410 Жыл бұрын
In the READ ME for “create-mf-app” it says “These projects are not production complete”. So if it is not production complete is there a way use Module Federation with CRA or do we have to just wait until CRA releases a version that will support MF? Would like to use create-my-app but it seems like it is not an option with it being not production ready.
@CHITUS
@CHITUS 2 жыл бұрын
You’ve highlighted a major problem with micro frontends in this video in that you need to have versioning. Wrapping components in an error boundary is not a solution, nor is having a fallback to a library. You may as well just have the library in the first place.
@NathanHedglin
@NathanHedglin 2 жыл бұрын
If you share the Organisms then the molecules and atoms will get loaded anyways as they're dependencies. Would they be exposed and useable though? If every micro-frontend defines their own organisms, then how are teams supposed to find those shareable components? You have to explicitly share and import them. Wouldn't having a central location be better?
@im-singh
@im-singh 2 жыл бұрын
Wow dream come true
@maximzaytsev1743
@maximzaytsev1743 2 жыл бұрын
Thanks!
@cydvici0us
@cydvici0us Жыл бұрын
You put this together back in 2021, if you were planning to establish a new project with MFE patterns in mind, is module federation your first choice, or would you choose something else such as open components or BIT?
@Tradewithsimpleminded
@Tradewithsimpleminded 2 жыл бұрын
Don't know where you watching this from but I wished you all the best in life ❤️❤️
@t1lewa804
@t1lewa804 Жыл бұрын
so helpful😁😁😁
@abhim6380
@abhim6380 2 жыл бұрын
Will the plug in be available for other build tools like vite
@LeEmilyBlanc
@LeEmilyBlanc Жыл бұрын
What is the video Jack mentions in the error handling section? I'd like to check out how to have my application fallback to older version of the components.
@minhdoquang4169
@minhdoquang4169 2 ай бұрын
Hi @Jack, First, I would like to say thank you for all your sharing. I am very appreciated. I encountered an issue when using Tailwind with module federations. The issue is that the remote components don't have the Tailwind CSS classes when using in the host application. I found out that it might be a limit of Webpack module federation. Is it correct and if true, could you show me how to resolve or any workaround for this? Thank you!
@thepetesmith
@thepetesmith Жыл бұрын
If I am shipping an on premise app, where every component ships in one shot, what is the advantage of MFE over a monorepo? I think the delivery vehicle is the entire pivot for the right decision.
@abhvr
@abhvr Жыл бұрын
Contributor to the Lowe's paint configurator mentioned at 1:56:00 here. Fun project! :D
@rajathvenkatesh3253
@rajathvenkatesh3253 2 жыл бұрын
I am looking to share services and make them as singletons to be used between my shell and micro front ends in angular. I use angular architects module federation! I have multi repo MFEs so NX share libraries would not be a good option. Any advise?
@virajjayasinghe3434
@virajjayasinghe3434 2 жыл бұрын
Hi thank you for your video. is there a video that describes the MFE configuration with react. I means from scratch. without using create-mf-app?
@Luxcium
@Luxcium Жыл бұрын
Wow I do not know what is that feature or how to enable it in my vscode (1:41) is that autocompletion in the terminal I am not sure but I do not think I can figure out how to make it possible in my system...
@rocketman0016
@rocketman0016 2 жыл бұрын
Hi Jack, Pls is it possible to use Module Federation on an existing project?
@raysplay2827
@raysplay2827 2 жыл бұрын
Very interesting
@mayankbajpai9871
@mayankbajpai9871 2 жыл бұрын
I am present ✌🏻 thanks for this one
@anyzzas7149
@anyzzas7149 2 жыл бұрын
Does anyone know the name of the theme he's using? Looks really good
@chinhha8758
@chinhha8758 Жыл бұрын
hey bro.Thanhs you.I have a question.I updated Tailwind 2 to Tailwind 3.example module Home still running normally.But module cart cannt call Tailwind.because Tailwind class not init in module cart,but if adding a new class in module cart Tailwind is running.do you have any solution?
@malatini_ytb
@malatini_ytb 10 ай бұрын
Hi ! Thanks a lot for this very nice tutorial. I followed it while coding at the same time but was stuck when calling the getProducts() in the useEffect of the HomeContent component. (it's not returning me the list of products but 'undefined'. I'll investigate more on the issue. Let me know if you have some ideas (I checked the files and I don't see any errors yet).
@7ronal
@7ronal Жыл бұрын
Great ...master ..!
@chetankumard
@chetankumard 2 жыл бұрын
Awesome Content Jack. Wondering how you would go about doing this in an app that is created with CRA?
@tgillitzer
@tgillitzer 2 жыл бұрын
CRA doesn't have support for Module Federation yet I don't think.. I'm not sure if they even have a version that supports Webpack 5 yet.
@amanazim9681
@amanazim9681 3 ай бұрын
Hi Thanks for the video however, for some reason my error boundary is not able to catch error of the can someone tell me why ? my codes are same as in the video
@RRXRS
@RRXRS Ай бұрын
I have the issue that the home styles work fine, but when exposing the home header and footer to pdp the styles do not arrive, only the structure of the components. Has it happened to you?
@joellekamaha626
@joellekamaha626 Ай бұрын
I got an error,with the tailwind style not appearing in the pdp just the text is appearing, when i use the header and footer of the home
@bryanltobing
@bryanltobing 2 жыл бұрын
Thanks
@aagam_doshi
@aagam_doshi Ай бұрын
Can this same thing work in Multi repo setup ? Like sharing states and JWT, where I have multiple Microservices and multiple different frontend repos
@lcd11001
@lcd11001 Жыл бұрын
Is it work if thoes projects are using React in difference version ? Maybe the core in react framework has huge change in structure For ex: Home project is using React v15 and PDP project is using React v18?
@superJerrySong
@superJerrySong Жыл бұрын
tengo una pregunta, que otras herramientas diferentes a webpack puedes utilizar para organizar el flujo de trabajo en los microfrontends?
Жыл бұрын
VIte también tiene un plugin de module federation por ejemplo
@onlywilddrift9506
@onlywilddrift9506 Жыл бұрын
If you use typescript how do you use the types from remote in your host?
@vedareddy6613
@vedareddy6613 11 ай бұрын
Hi , what about the security if the files and everything is exposed by remoteEntry ?
@PunksebastianRock
@PunksebastianRock 2 жыл бұрын
Just for anyone who's dealing with an error when adding reac-router-dom, I've just find out that Switch is no longer Supported. Use Routes instead. React and it's changes are really annoying.
@davidlyj
@davidlyj 2 жыл бұрын
Could you reply with the snippet of code that you used to fix the issue please?
@deepcrashcourse
@deepcrashcourse Жыл бұрын
Hey Jack, Thanks. Can you please share the vscode extensions you are using for React code intellisense.
@nimaeslamloo
@nimaeslamloo 2 жыл бұрын
Is this about server-side rendered micro front ends or only the client side?
@longnguyenvan9532
@longnguyenvan9532 11 ай бұрын
MFE has its avantages such as independent development/deployment, easy using multiple technologies/programing languages across your apps and yes, it does break a whole big frontend app into micro apps so we can get to maintain the app just better. But look at it now in 2023, many developers are still prefer the old fashion way. What make it not really "that" popular do you think?
@alexcebotov5052
@alexcebotov5052 7 ай бұрын
Hi all) I haven't watched all the videos yet, but I'm confused about one thing. Can we take header and footer and separate Layout and then use it in other services? Because now it looks like we're repeating the code, which is not good in my opinion.
@user-hn7lm9qy9l
@user-hn7lm9qy9l 2 жыл бұрын
I Can build it all and deploy this app with builded HTML/CSS/JS files to my host?
@mayurshejwal1257
@mayurshejwal1257 2 ай бұрын
Facing issue. Css classes of header and footer component not updating for PDP app. Please reply. @7.25 in the video
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,3 МЛН
My Unconventional Coding Story | Self-Taught
27:14
Travis Media
Рет қаралды 587 М.
Summer shower by Secret Vlog
00:17
Secret Vlog
Рет қаралды 12 МЛН
50 YouTubers Fight For $1,000,000
41:27
MrBeast
Рет қаралды 207 МЛН
НЫСАНА КОНЦЕРТ 2024
2:26:34
Нысана театры
Рет қаралды 1,2 МЛН
How do large teams scale their Frontend applications?
7:47
Software Developer Diaries
Рет қаралды 22 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 512 М.
Micro-Frontends: What, why and how
9:39
Jack Herrington
Рет қаралды 152 М.
Docker Crash Course for Absolute Beginners [NEW]
1:07:39
TechWorld with Nana
Рет қаралды 1,6 МЛН
Micro Frontends: the Evolution of Frontend Architecture
43:33
Intro to Java Programming - Course for Absolute Beginners
3:48:25
freeCodeCamp.org
Рет қаралды 3,1 МЛН
"The Life & Death of htmx" by Alexander Petros at Big Sky Dev Con 2024
23:01
Montana Programmers
Рет қаралды 41 М.
Backend web development - a complete overview
12:58
SuperSimpleDev
Рет қаралды 1,7 МЛН
Summer shower by Secret Vlog
00:17
Secret Vlog
Рет қаралды 12 МЛН