Micro-Frontends Course - Beginner to Expert

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).

I found it wasted less processing and condensed the code in a readable way for cart.js to use async awaits and simply return the json'd object each time (rather than calling getCart after modifying it). I feel like I'm the only one who noticed/feels this way, but in case I'm not, here's the basic shell of what I did instead:
export const addToCart = async (id) => {
const data = await (await fetch(`${API_SERVER}/cart`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${jwt.value}`
},
body: JSON.stringify({ id })
})).json();
return data;
};

I like how he's a principal developer with a bunch of experience but he still totally freaks out about his code working haha

Hi , what about the security if the files and everything is exposed by remoteEntry ?

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

You should've sticked FE only by keeping APIs ready.
Way too much time is spent in video to setup apiserver using nest js.

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?

This is a great video. Thanks Jack Herrington.

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?

Can anyone help me with how to use SASS or .scss files in react micro front end applications?

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?

Thank you for this great tutorial

so helpful😁😁😁

Thanks Jack , From my side npx create-mf-app just does not work , having this erroe ERR_UNHANDLED_REJECTION

Thanks for this video, I am having issues running npx create-mf-app for server, it keeps returning an error without creating the app
? Pick the name of your app: server
? Project Type: API Server
? Port number: 8181
? Template: nestjs-auth
Your 'server' project is ready to go.

Next steps:

▶ cd server
▶ npm install
▶ npm start

node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v18.16.1

How to deploy it in AWS or azure or any local server ? Can you show it in your next video?

A very nice tutorial

How this will work with next js server component

Why not put the header in the container and wrap MFEs with a shell app. so there is just one instance place where is header is used.

Can I use the component exposed from react project in SSG builder like Astro?

command npx create-mf-app then selecting api-server then nextjs-auth gives error

node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v18.16.0

Hey Jack, Thanks. Can you please share the vscode extensions you are using for React code intellisense.

Hi Jack, great tutorial, got me started right away. I do have some issues with my intellisense, does not seem to recognize anything from the exported modules. I am using typescript though instead of js. Any ideas?

If you turn on subtitles, you will notice everytime he says "micro-frontends" it translates as "my girlfriends" XD

I am googling servewar, but I cannot find it. Am I naming it wrong?

Great code , I love it .

Incredible content , dude you are changing a shape of such channels

I'm sorry, this is not micro frontends, if every change in one micro frontend requires a change and deployment in the second, it loses the entire purpose of the micro frontend, which is isolation and decoupling

read micro frontend should be totally decoupled and communicate with each other through events

So great explanation. You're a great teacher. 💯

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.

you never build it?????? 2 hourss, and you never build ?

If you use typescript how do you use the types from remote in your host?

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!

Thanks for nice video! Btun afaik subscrube returns SubscribeLike instance that had method unsubscribe (should be called to unsubscribe). So not sure returning it in useEffect acutally does unsibscription.

Hi, trying mfe for angular 5 and angular 14 but struggling with it, if i can get help and guidance

god level knowledge sir 🔥

where the node_modules folder?

This tutorial is A W E S O M E!!! Thanks Jack!!!

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.

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.

Facing - npm ERR! Invalid package name "@" of package "@@nestjs/passport": name can only contain URL-friendly characters. Tried to remove "@": "nestjs/passport", it raises a new error cannot find index.html in server. Any suggestion on how to fix this issue

I definitely going to send you a special fidget spinner gift in the near future for this AMAZING tutorial!!!
LOTS OF THANKS.

only react apps what about angular and vuejs other native webpack apps for microfornted and example

tengo una pregunta, que otras herramientas diferentes a webpack puedes utilizar para organizar el flujo de trabajo en los microfrontends?