Micro-Frontends in Just 10 Minutes

there's a lot of buzz around microphone ends right now and you may be asking yourself well how do i try it out no worries i got you covered in the next 10 minutes i will get you set up with microphone ends using module federation on three different apps that you can experiment with and try it out for yourself okay so let's go and first create a new directory called micro fes and i'm going to bring up vs code on that directory now with nvs code i'm going to bring up the terminal and i'm going to use an mpx command called create mf app to create our first app so we're going to call this the host app and it's going to consume a micro for an end from a remote app so we'll start off calling this one host and put it on port 8080 and for this we're going to use solid.js and javascript and tailwind now i'm going to go into host and start up yarn on that and while we're there i'm going to go create another terminal and this is where we're going to create our remote app so again we're going to use mpx create mf app and now we're going to have our remote app and it is going to have our microphone end in it so call this one remote we'll put that on port 3000 you can put on whatever you want and again i'll use solid js and javascript and tailwind so now i'll go into that remote directory and get that yarn started now i'll go over into the host app and actually start up the app all right looking pretty good we've got the name of the app we've got the framework that we chose javascript and tailwind and the title of the page is host so pretty good start there let's go over and go into the remote directory and then do yarn start from there and now we've got our two apps running side by side we've got host on port 8080 and remote on port 3000 and they're both running solid gs so if you're asking yourself why solid js and not react well i do want to show off the cross-platform nature of microphone ends and this is going to be the way that we're going to do that so let's start off by creating a micro front end in solid js on this remote app we're going to make a counter so we'll go back over into our visual studio close down this bring up remote we can see that we've got an app.jsx file in here and that basically puts up what's on the screen so we need to go and create another component call that one counter.jsx and we're going to bring in from solid.js create signal and that's how you track state in solid.js basically the equivalent of use state and react now i'm going to export a default function and create a count and a set count using that create signal start off with zero and then we'll just return out a div and then within that another div that has the count in it and then i'm going to add a button that basically just increases that count i'm going to add an unclick handler that then when pressed sets the count to the current count plus 1. all right pretty cool let's go over to our app.jsx file bring that in i'm going to bring in counter from that local file and i'm just going to use it right here all right we've got our counter and it works great now of course we want it over in host over here so how are we going to turn this into a micro front end how are we going to expose our counter from that remote application we're going to use module federation for that now if we were to use mpm what we'd have to do is extract that counter into its own library and then import it back into remote and host and then when we want to make a change we'd have to change that shared library and then republish both of those applications what a bummer well totally different scene when it comes to module federation let's go check it out so i'm going to go back in here and we'll close out these files and then go into our webpack configuration scroll all the way down to the module federation plugin and we can see that you've got the exposes key and the remote key these are the most important ones so the exposes key we're going to say that we want to expose that counter from this remote application and you just give it the path we're looking for and now all we got to do is just restart our webpack to get that change to be effective and now if we look over on our remote everything seems to still be working but there is a new file in there that's automatically generated by webpack and it's called remote entry and it is a manifest of all of the modules that are exposed from that remote so i'm going to copy the url of that and then go back over into our host app go into our webpack config and again scroll down to that module federation plugin but this time instead of exposing anything i'm going to say that we have a remote we have some remote code that we want to be able to bring in in this case the name of it we're going to use remote we're going to say that we have remote at and then that url and why remote here well this remote maps to this name down here so this is the name of the federated module package effectively and so you want to make sure that those two match but you can actually use anything you want here so let's go back into here up to app.jsx in the host and now we're going to import that counter from remote in this case and then counter and then again i'm just going to use it just like i did before save that out and now it's telling us it can't resolve remote counter but that's only because we didn't reboot our webpack let's go and do that restart that and now if i refresh boom i see the counter and it's shared between these two don't believe me that's cool it's fine to be skeptical let's go back into our remote make a change to counter and we'll do a little bit of tailwind magic we'll change that class to something along the lines of a background blue 900 with a text color of white and a padding of five let's see if i change remote that's obviously gonna change we know that and if i refresh host what happens bam you got the code there it is so module federation allows you to run time share code between these two applications which is really cool but of course i'm sure you're like hey i'm not a solid js developer i'm a react developer how is this going to work in a react app how am i going to have my react app consume this solid js microfront end don't worry we'll get there in the meantime if you like this video be sure to hit that like button right now and of course hit that subscribe button and click on that bell if you are interested in more advanced front-end topics just like this the kind of stuff we cover on this channel all the time all right let's jump back into vs code and in this case i'm going to create a new app and again we'll use mpx create mf app and this one we're going to call react host and we're going to put that on port 3001. you can use whatever you want hit react javascript and again tailwind and then i'm going to jump in there react host and start up that yarn in the meantime i'm going to go back over into our host app in the webpack config and steal that remote because it's going to be the same between the two and then pop that into our react host webpack config scroll down again to the module federation remotes away you go okay but of course our react host doesn't know anything about solid js and we don't really want to teach it solid js by importing solid js so they can mount it what we're going to do is actually wrap our solid js component essentially a universal function that just takes an element and will automatically mount that application into it so let's go back over here into our remote and then take the app which is what's doing the render right now and copy it and then i'm going to create a new file called counter wrapper dot jsx paste that in there i don't need any of this code i'm just going to remove that and now i'm going to export a default function takes an element and it's going to render a counter into the element just like that now the only thing we need to do is expose that so let's go down into our webpack config and expose this additional module again counter wrapper and we need to stop and restart our webpack no big deal so now we got our counter wrapper going let's go over here in our react host and go into our app.jsx file and here we're going to import that counter wrapper from remote counter wrapper and then in react we're going to bring in use ref and use effect now down here in the app i'm going to turn this into a function that has a body on it and we are going to take this div and give it a ref call this div ref get rid of its contents get rid of these two lines no problem now we'll create that div ref by using use ref set to null and now we want to do use effect give it a function and we're going to give it an empty dependency array meaning it should only ever run the once when it gets mounted and then within that use effect we're going to call counter wrapper and give it the current value of that div ref which is going to be the element that we want to mount onto all right so let's go take a look over here our react host is all set up so let's do a yarn start on that and there you go you've got a rack host you got a fully functional solid js micro friend embedded into it just like that pretty cool i'm sure you have a lot of questions though so there is a link to a playlist that i've created a module federation videos that i've created feel free to dig in there there's lots of great stuff on module federation in there there's also a really good book practical module federation that was written by myself and zach jackson the person who created module federation in the first place of course i'm sure you have more questions so be sure to put those in the comments section down below i'm happy to answer whatever you have of course feel free to hit that like button on this video and hit that subscribe button if you like this video and really want to see more advanced front-end topics like this one

Channel: Jack Herrington

Views: 6,080

Rating: 4.993691 out of 5

Keywords: micro frontends, module federation, module federation webpack 5, micro frontends react, module federation webpack 5 react, federated modules, micro frontend architecture, mfe, webpack 5 federated modules, federated modules in webpack 5, module federation crash course, webpack 5 module federation, module federation tutorial, webpack module federation, react micro frontend, solidjs, solid js module federation, microfrontends with react, Practical Module Federation

Id: s_Fs4AXsTnA

Length: 11min 0sec (660 seconds)

Published: Thu Oct 14 2021