Live - Vue on Module Federation | Tutorial

all right happy to see everybody well look a little washed out there hmm okay that's interesting i've been calibrating all my my video lately and it's a little interesting not to go and check the white balance on that it's all blue oh well good to see you guys i'm hoping you're excited about today's topic which is vue and module federation i'm pretty excited about it it's very cool i just tried it out with a vuex store surprise it works but that's great so we can talk about shared state with our view apps uh jump on to the comments i would love to hear if you have experience of you if your view folks have you ever seen module federation before if you don't know anything about it let me know and uh you know we'll tweak this to be helpful for you because we've got got a little time and we should uh look at this in fact actually i will say the actual like portion where we go and implement module federation with this is like like five minutes like if that to actually make this go so if you have any um questions before you get into it be sure to go and put those in the chat all right so welcome to blue collar coder i'm jack harrington it's friday this is awesome uh i just got some great news about some volunteering work that i do in the schools and how we will be uh funded so i think that's awesome oh great psycho awesome you get to learn about some view which is awesome always good to know and we can even i can even show you a react app and a view app in the same page if we want to do that it's kind of cool kind of do like a spa single spa kind of thing so yeah i was uh i just got some great news that we're gonna be able to go and uh do some extend our volunteering into title one schools in our local community so that's awesome okay so i just upgraded the the starter view thing so i'm gonna let's see today's topic we'll do we'll do dogs see module federation view dogs i like dogs dags and let's see mpx d get and then we're gonna use this starter kit this is the view three starter kit sorry that we'll go over that at least that's not as bad of a flub as i did in the video oh my god that was embarrassing um all right so here we go so we're gonna have a uh i don't know let's let's have a home page app so module federation is good when you have multiple apps right that's that's the big deal if you've got uh if you're working in a big company you probably have microsites and microsites means that you have multiple applications and in those were in that world like sharing data but sharing components between those can be a drag right you've got npm which means that everybody's got to go and get the new version and then push to release you've got bit which i think is effectively the same and then you've got module federation which doesn't require a push to get new code so that's what we're going to look at today so we are going to make a home page app and a search app and we're going to use d git to do both of those this is the the starter kit that i use totally available to you anytime that you want it hi michelle how you doing happy friday hi zod zade no react pretty well uh okay so this is great so when i mess up on all my view stuff which i've done before you guys can help me out because you don't know any of you which is great um no i'm just kidding we'll figure it out together it's actually really easy view is great i i really enjoy view i've used view in some proof of con in some more back endy type applications we had like a in my current job i was working on like a a tag based product recommender and did all the back-end like work that would show what the results are going to be and all that and you know in view and it was great awesome framework okay so we've got two apps uh one's called home and one's called search basically exactly identical at this point they're just two identical repos and they have let's go take a look at the package.json and let's see we've got our usual you know sort of babel core css loader all your sort of basic web pack stuff currently on web back beta 22. it's a little old i think we actually have a release candidate now i should update that uh and then the cli and the dev server those are pretty standard and then we've got on the view side the view loader and the view template compiler these probably should get updated as well uh awesome i'm glad i can teach you something new um and then we got view view is the only hard part dependency that's non-dev and so let's go take a look at our webpack uh let's see so home is to be on 8080. now you can change that by changing out the dev server it's going to look for you know view.all that and then it's got some basic rules we're going to take the view loader then grab the css and then finally the script loader and the only thing you probably aren't familiar with would be well the view loader plug-in uh which is you know view and then the module federation plug-in which is out of webpack five and that's what's gonna allow us to do our sharing so let us go and i'm going to go and put the only change i'm going to make so far is put search on 8081. the only reason for that is that i want to uh run them both at the same time and it's hard to do that when they're both in the same port and actually let's go and make a change to the app itself so here's here's our app hello from view i just found out that that's bad you need to have a tag in here so i'm gonna do that and i'm gonna say this is this is the home page so that this is what a view component looks like there's a dot view file and part of that is the template which would be the html template i'll call this this is the search page i'll make it all uppercase and i'll make that one all up okay so we can tell the difference and then let's yarn on both of those oh wait hold on let me go into those directories oops that's wrong home on that side and search on that side and then yarn and yarn start and then on this side yarn and yarn start great friday boy i'm looking forward to that good times okay so there we go halfway to home so we've got a home page on 8080 we've got our document there our our search page on 8081. and if i were to go over here and i could say you know the home page rocks it's got uh live reload so you know there you go nice devx v3 does not need a root can have multiple components at the root all right excellent thank you thor all right you are the closest thing we've got to a view expert on this on this stream i did a whole screencast series in in view two years ago for packed clearly i have lost all of that information uh okay so uh let us go and then we let's say what's uh let's make a header shared header we need to use it it's a microsite right and invariably the one thing that you need to share between microsite applications is the header right because everybody wants everybody needs the same header and it's all got to be up to date but the problem is that um you don't want everybody to implement it because obviously that's just crazy amounts overhead so we're going to have a home page team step up and say we're going to do better so we're going to do header.view in there and then i'll make a template for that and let's see do the div again thing i wonder i'm getting errors i get little problems if i don't put in is it that i can have multiple roots but they all have to not be not they have to all be tech non-text like a div or whatever p tag or something they all have to be in the tag okay so let's see we'll call this h2 this is kind of dumb but whatever header right cool and then in app world so in in uh in the app the way that we would import that is we'd add a script tag there we go and then it's got to import the header from dot slash header easy peasy and then it's got to say that that's available by adding that to a hash of components header and at that point you just pop that in there so there you go header let's take a look and i've got a header so that's how easy it is to reuse components in a view context of course you can do props and all that kind of fun stuff okay so let's catch up with thor here ha ha expert you feel like i do um vs code doesn't like it yet okay fine all right i'm not gonna push it i don't care like who cares uh all right apparently um view x is is not released it's like i when i brought in view view x which is the statement which is a state manager for vue um kind of like most most common one i would say uh it's it's not released for like 4.0 yet i don't know whatever okay so we we have our view now we have our header in home and we want to use it over in in search so how do we get that going so let's go over here to webpack config in home and let's get get all riddle a bunch of these tabs so we can concentrate our efforts so this is home so we'll call it as such home and then we'll say that x exposes header you can call it whatever you want but i'm gonna i'm gonna call it what it is and then give it a source header right and now when i restart this so yarn start there you go everything still works which is great but if i go now to a new file called remote entry it gives me this module map stuff that basically says here are some modules that i'm i'm exposing from my application so you can use those modules enjoy so so we're going to do is grab this url and go back to 8080 on there so it's you know still same thing and we'll go over to the webpack config of our search page because that's where we want to bring that in so it's on 8081 everything looks good so far everything looks great down here so we're going to change this to search to just to disambiguate it from home and we're going to say that we have a remote in home and it's it's called home that this part has to match with uh this right here but this can be whatever you want it to be um and then we give it the htp a url for that and now let's just yarn start no need to reload no need to rebuild all that okay looks like it's happy great so now we've got to import that header so i'm going to go back over to my app this this time in the search page make another script tag and now i'm going to import header from home slash header like just like so and i'll bring in that i'll add that components why isn't that hinting that that should hint that i mean that's pretty much that's pretty standard all right so let's uh let's drop the header in here whoops header there we go and voila now the search page has the same header and you want to be blown away if you've never seen this before never seen module federation before here you go so now with live updating okay so this is when obviously we're working on localhost at this point right so this is when the homepage team would push this header update their whole app to production right so they would hit they're pushing to production now right so they've saved right so now if you go over to home page now you get the updated page and then the next time that anybody goes to the search page they get refreshed essentially and now they've got the new header fire it's lit man is module federation a new technique for building web pages i would say it's a it's a new architectural tool in your tool kit that allows you to share components more readily so let me let me give my my let me jump in and do my little spiel here so it is built in to webpack five uh it is not a product or anything like that there's no money it's just a this is now part of webpack five right and it it essentially is along the same lines of like think of it as a live version of mpm right if you were going to share this header module before what you'd have to do is either export it out of the app uh out of like package.json you know and an npm so you basically make home into a you know package but really what people do is they go and extract the header into its own project probably like in a mono repo and then they would have just the header project right and versioned and everything else and then they would consume that in both the home and the header and then search right and then in order for the pages to get updated you know that you'd have to push a new you'd have to change header push a new version of that up to npm and then both of those applications would then need to bump their versions and release and so that's pretty lame it's not going to get you out there simultaneously and that's what actually that's that's another thing in this microsite space is you know nobody wants to have it so that it's done where that's the case right nobody wants to have a header that looks one way on the homepage and then some and then on the pdp page it looks different and on the search page it looks different again everybody wants it to be the same and so what invariably happens is people go to like single spa or they create like a vanilla js header that's published s3 and then they just kind of script load that or use an esi tag to load that and there's a whole bunch of hacks and what i'm saying here is with webpack five hacking be gone and in fact even better what you can do is if you're like whoa wait a second well what happens if a home page crashes right like if someh somehow home page is dead right which is fair right so now we go to home page and it's not responding and we go over here and this guy is crashing because it's trying to import header and header is not working um at least on the react side and i'm betting there's something like this on view too there are error boundaries and you can basically do an asynchronous load of the header code and wrap it in an error boundary and when that doesn't work you can use an npm fallback and so basically what you do is you do the mpm library but you dual publish you publish it both as an npm but also as a federated module up to s3 and then what happens is whatever your static store is uh the application code would first attempt to load the federated module which will give you the most up-to-date version and if that didn't work then it would fall back on the npm version so it's kind of like a python piton pi time i'm not a climber i should because damn climbing looks great um you know that if you latch in with your python you can only fall so far so you can only fall past that you know to that npm you still get a header it just might not be as up to date okay so there's my spiel about module federation why it's so cool so uh let us shall we try out view x just to see if we can like because that's like question number two is always how do we share a state between federated modules like is that a big hack do you have to like glob onto window or blah blah blah no you don't need to do any of that but uh so in in view land the hot uh state manager is view x i don't know maybe not hot it is it is what people use i use it when i do view um it's essentially a um a bi-directional data management system and so we're gonna do is add on uh view x at next so if you're familiar with mobx in the react world view x is very much like that so uh you basically set a bunch of values you can then share them and then when you update them they just automatically get updated wherever it's consumed so i'm going to go and add view x at next to both of these and then what else do we have to do so i'm going to go over here to the app we first do it in app so let's take a look so we got uh bootloader so this is where it gets a little tricky uh okay so for view three which is us because we're so awesome we are right on the bleeding edge of all this we first import create store and then we create a store and then we use the store and but this guy has got to change because i kind of globbed him together so let's call that app and then we will [Music] uh app.mount that okay cool and then let's so we over here under state i think it had like a i'm just copy and pasting code because i'm that kind of guy um nope nope hold on getting started where is it there we go that's the one okay had that so that's a better version of store obviously this is that's no bueno and so let's set a count of i don't know 25. so in the header you're gonna have a count of the number of things that you put into your cart i'm assuming e-commerce it's because i work in e-commerce so you know you can imagine whatever kind of shared say you want okay so that's our store and we're sticking to it so let's bring up home okay looks like that's happy so in order to get access to that state we need to go over into our header and we'll bring up again the script stuff because we want this we want that count to be in in the header right obviously not obviously but sure and i think it's like computed and then count which is a function let me just i'm going to go over here to the documentation again thor is probably like are you kidding me no it's not like by the way psycho it's not like redux redux is unidirectional so you give it um you give it like events those events go change mutate the state and then that in turn updates stuff uh you have to like it's you it you have to it's not by it's not it's not dual binding um okay so uh get a state there we go yes and this works okay there we go so we're gonna have a computed value in there which is kind of cool like these are super cool for this sort of stuff but um okay and then we'll say uh you know count is and then double oh handlebar is it let's see so if we go over to home oops there we go there you go count is 25. cool nice right awesome so let's go back over here to our our uh bootloader change the count to 22 just make sure that we're not yeah nothing on my sleeve got some shared state which is great so now let's go over to our search and see what happens if we just because now we don't have a store yet on search right so yeah we're probably going to get some error yeah okay can't read the state of undefined so let's go back over here and i'll show you where that blew up so now header right it gets to this dot store which is now undefined because in search there's no store and so it tries to de-reference state off that and so i want to do that so let's go back over here to bootloader from app basically just grab this whole thing and pop that down into the bootloader of uh of search we'll change this to i don't know 72 and now there you go so the header in search in home is using the home store and that's returning to account of 22 the home in the the the the ux store in header is showing a a starting 72 for some reason or another i don't know who knows and now you know some but basically that's there's some shared state for you so pretty cool all right we got a new person on the the discord server thank you so much um i probably will hang out after this by the way on the discord server just for a little video chat so you can ask me any questions you want it's not recorded you don't have to like you know be pretty on the on the tv screen or whatever you know it's all good so do we want to try and like mutate the state and see if that works so i can like see different parts of the module federation working or just show how how little i know about vue nowadays let's do that okay so uh okay so i need something to like add a number to that header so maybe over in search page we can add a product so let's do that let's uh let's have a button it says you know add add to cart all right everybody wants to add to cart it's coming up on holiday season wow what happened there okay thanks uh wow that's some weird yeah i'm trying to open a div not close a div yes code okay so there's our button let's take a look over on the search page cool we got it but it does does nothing so let's let's go over to uh okay so let's see i need like a method i think on here come on is it possible to export a module from a view app and consume it in a react app ooh yes i did that in the original video let's get done with this and then i'll uh i'll do that for you how about that so i think the first thing i need to do is set a method right methods on click i think that's it god i'm just winging it here and then uh let's see oh v on that sounds good i think it's like v on click is on click sure why not uh not enough webstorm i'm counting with you there that's true all right i'm gonna do the the original hack of alert one all right oh look at that who knew okay and then um i think what i can do is from here i can say this dot store dot state dot count plus equals one let's see and cannot read property store of undefined oh i know why i'm not i'm i'm in a anonymous function uh which is still the case okay there you go oh my god wow that is craziness okay so here's what you got you've got the search page the search page is bringing in a header from a different application they're both listening to the store and i'm mutating the store in the search app and then the header which is published from the home page app is seeing that mutation and updating that count thank you thor for the uh yeah okay yeah so i can do yes the shorthand on this in view land as is at click all right this shows i just just haven't done enough view lately i love you and i just have yet to yeah and i like the view 37 it's great all right so zyde was saying let's go and put a reaction let's go and put our this is gonna be interesting um hmm okay it was a lot easier when i wasn't using a store as i'd um but what we what we'll do uh is we'll do something um okay so we'll go over here we'll just check to make sure that this is all good if uh if if this dot store and this.date then yeah something like that uh otherwise yeah zero i guess is that gonna work i think that's i'm so used to now typescript with its um with the optional chaining and by the way um the typescript thing is on sunday at noon to 1 30 pst we're going to do a dry run of the the new typescript course which is pretty cool it's an interesting take on typescript teaching it's around basically converting javascript files to typescript files so that's you learn typescript by converting javascript which is what you need to do anyway um okay so let's take a look and make sure everything still works looks like it looks like it still works okay so with this trapping i now believe that we could use the header in a react app uh because it's no it's not gonna look for a contextual store and and there you go so let's go over here to boot loader actually you know what shoot i i probably didn't even do that okay so let's go over here to uh create a new file and app we'll call it mount header and we'll make it just a javascript file and this is going to show you that like module federation isn't just good for doing um components you can do anything you can anything that you can web hack and bat or anything you can create a as a javascript file you can export and import as a federate module this could be json it could be you know some functions it could be a library it could be components whatever you want uh oh x date oh yeah because that's gonna give me that a lot of people what's what's the venn diagram of view plus x state like there's like three people um okay uh okay so we want to be able to let's don't even worry about that and now we're going to create a function export default um and it's going to take a selector and then it's going to do some stuff with the selector okay it's going to do all of this with the selector so the selector being you know this hash because it you want to be able if you were saying i want i want a function that puts a header on a page right this this is going to be that function and you want to tell it where it goes so that's what that selector is so now we need a new app so let's go back over here to our view 3 starter and my home page on github should i do git lab guys it's money i didn't think it was i i was kind of surprised it's like money i don't know like github it's free get lab is money not that i'm versus spending money believe me but you know it's money mpxd get and then the starter for react on pound main and we'll call this a uh i don't know what are we doing for let's do the pdp page in in in react how about that so pdp pages guys are like no view we're going to react uh great stuff we'll watch later cool thank you charlie uh much prefer github okay we use git lab at work i use uh we use github enterprise and uh bitbucket at work kind of slowly migrating to github enterprise honestly uh okay i i don't have a dog in that fight i don't work for either of those companies so what's that uh yeah okay so let's go take a look at what's in in here so this is the the react starter kit is in what i've done here in under app so we got our good familiar kind of react-y stuff right and let's go over here it's going to be on 8080 which we don't want we want an add two so let's uh yarn that 8082 the sequel the sequeling hey if you guys are into a comedy by the way um this is terrible but i love this show called rifftrax and they're doing this thing on the 29th where they show uh they basically riff over movies and they're doing uh starship troopers which is a fantastic one if you ever they they rip that movie up and they're doing on the 29th on cener which is a way of like sharing uh netflix movies and and currently starship troopers is on netflix so anyway all right i'll start this up enough of a plug for my friends at hey rifftrax again i don't no financial stake in that company um i don't think there is a financial stake in that company um all right so we've got that and we want to go over here to so this is our react app tada yay oh gitlab is free why does it seems like it's like the branding on it gitlab lab it's like free trial like when does that when does that end that i mean maybe i got spooked off but like so that like the free trial can last forever or something um okay so let's go here to the webpack and we'll call this one pdp by the way so somebody mentioned recently like had an issue where they put in some extra like characters in here this name has to be basically a javascript variable name so if you add in like dashes and stuff like that not gonna work not gonna happen okay so don't do that uh okay so we'll just grab oh sorry that is the wrong spot let's go over here to search because that also uses this as a remote so there you go i'll go and grab that i'll put that in there for the remotes and so now we have home as a remote and we're going to go over here to import mount header from home slash header oh a mount header and it's going to blow up because it can't resolve home sure no problem so we'll restart because it hasn't re restar that okay hmm didn't like that much i didn't like that uh oh i know why okay because i didn't go and add mount header to the list of webpack outputs so that's true so let's go and add that and again we'll have to restart so mount header and then start that server up again again like republish it's it's happy and now now react is not blowing up which is great now we actually gotta call it so let's go over here to the uh so we're done here and done here and we'll go to the index page and create a new thing called header and then we will mount that header on pound header oops would be nice if i put a string in there wouldn't it and would be nice if i put a hash on that string not not that and not that how about that okay all right here we go oh my god wait no that was what uh oh that's it oh right i know why that happened i mounted the whole app that's crazy okay let's go over here yeah you see i i brought in that what i really wanted to bring in was just the header so let's go and create an app for that save and now if i refresh now i get the header and uh gitlab is also free and this pricing is a poor design okay chris on your recommendation i will go and check out git lab i've heard great things honestly i have i i've heard great things so uh okay one more time with this let's just go and show you that like now you've got view and you've got react and everybody's happy let's go over here to header again and let's just make one more change you know a few more exclamation points because there's never enough exclamation points hit save go to my header and go to my home homepage it's automatically updated go to my search page hit refresh update it go to my react page hit refresh updated boom done nice okay boy wow so we talked about wow so much stuff we've talked about view modules view components we've shared functions we've done all kinds of stuff um we've gone and done shared state actually okay joking aside um we could do something like any any kind of state manager that works across react and vue might be an interesting target to try out with this like if you really really want to do that um what i mean for me personally if i were like the architect of this solution i probably wouldn't use any state manager at all and i would make sure that you can uh if you can create a store app as a fedora module definitely yes been there done that absolutely um in fact that's what that's what i would do i would create a vanilla js store object why don't we just do that actually i i don't know [Music] it would essentially be like an event listener type deal should we try it let's okay i'm crazy enough to try it uh yeah do you think yeah i don't know i g i gotta say i was spooked like last week i tried something really off the chain went for about 10 minutes on it and it didn't work so i'd rather do a whole video where i full on did the research and figured out exactly a nice scenario but what i'm saying is i would make a a shared store it would be very lightweight and would have just the user identity and maybe the cart information in it uh at least in an e-commerce sense right because if you share a huge store and everybody's talking to that huge store then there's a potential for that store to change its structure because it's so big and then every everything blows up but if you if you really all you really need to do is share the user identity and share like a couple of things like user identity and the amount the number of items in the cart then this would be great for that let me catch up on comments comments over here this is awesome thank you guys this is great and i need i can throw away that because it worked i i always have like a piece of code off to the side that uh that i can just ping on you know and grab the right thing if i mess up on the syntax so let me let me check on uh michelle didn't imagine viewing react integrated so easily thanks who knew you now know you can be like you can be the guy who walks into the meeting and he's like i got this idea by the way svelt is just as easy um if you're looking for like a a lighter weight framework i think in particular like the header it would be a great great header this felt will be a great header and you can do exactly the same thing i i did that in a previous video using spell exactly the same way so you shall you can be the person who walks in the meeting say i got i got this uh form management is better in react angular or view hmm i do love react hook form uh let's see uh i can't speak to angular view uh i honest honestly i'm not qualified to do that um in that area this module federation is similar to a microfront end great question from ramon and okay so here's the deal so people like wait a second single spa right it does all that cool stuff and you know it's like the the acknowledged leader there's like open components and there's single spot like does module federation kill single spawn the answer is no actually in fact if you look under the documentation for oops that's the wrong wrong window we'll go over here to the single spa documentation and we'll go for module federation and they basically say in the documentation look at that [Laughter] sorry yes um yeah so there's different way yeah so module federation we look for that and it's now one of the the acknowledged ways of of putting modules out there you know i'm gonna turn the brightness on my screen hold up let me let me do a little av work here how's that that looks a little better okay um so uh they usually use system.js in or is it.js just system.js in as a way to package uh what they call parcels in single spa world and the point of this is that they that you can use either system.js or module federation module federation is a code transport mechanism it does not care what you do with the code and if you have like a view component and you just try and use it and import it as a react component boom it's not going to work it's not going to do that marshalling for you so that's what single spa is going to do single spa is actually going to wrap your react apps your view apps your angular apps all in a parcel and that parcel presents a unified api surface that regardless of the underlying view framework makes it usable in any page right so micro so model federation is not going to do that work for you if you have a situation where you have multiple pieces and parts and pieces like that you're going to want to use something like single spa to do that work of the micro fv stuff but i think a lot of people fall into this trap of like well wait a second do i need single spot all my things are react or if all my things are view absolutely not you can just as i showed showed like you know just bring in the freaking component right it's done okay so it looks like we got a whole thing going on here about forms managers which by the way i'm you know i'm a big deal i love performance managers so if you guys want to want me to do like a comparison video just just throw that in there um okay so all right and i can see doing a header app with a store pulling that i know where anything needed makes sense v3 is a composition api yeah yeah i'm a big fan of u3's composition api for sure um let's see working with as nested forms uh yeah oh restaurant menu generator we just had a new guy come on uh on board the discord who's like that's does the out the outside menus for like taco bell and stuff like that totally cool uh okay so do what we do have this use case react module federation with our webpack rc version block because polyfill issues on ie 11. sorry dude don't know what to tell you ie11 man painting people's existence uh next step for microfront ends is view apps fingers crossed uh okay show me some work some complex code you mean like form complex or are we still talking about microphone ends and then uh let's see i'm getting down to the end here all right cool well this has been great thank you so much for the awesome questions um what i'm going to do now is we're going to go over to the discord server there is a link to that up in the header of this of my youtube channel page sign up it's free and then i will be in the uh we'll be in the video chat and we'll just you can just talk and ask me any questions you want and no uh no recording so feel free to show up and have some fun can't wait to see you guys seeing a few be happy be healthy be safe all right

Channel: Jack Herrington

Views: 884

Rating: 5 out of 5

Keywords:

Id: LAu1p6tmj_Y

Length: 46min 20sec (2780 seconds)

Published: Sat Sep 26 2020