 Hello Java developers, my name is Matt Ravel and today I'd like to show you how to develop Microfront ends for Java microservices. Let's get it up So this screencast is based on a blog post I wrote called micro front ends for Java microservices read through the blog post right to learn all about micro front ends what they can do and About Jay hipster and all that and you know these are the different steps But in the repository for this blog post there's a demo dot a doc Basically a demo script that I created that is written in ASCII doctor and thanks to my handy-dandy ASCII doctor plug-in it renders nicely and it's the same thing as the blog post But it's just a condensed set of instructions so I can do this screencast for you and it all works quite nicely So we're gonna use Jay hipster for this and you might be wondering you know What is Jay hipster? Well, if you go to Jay hipster tech you can learn more but in summary and it's very basic When it started it was just an application generator that generated a spring back end and an angular jazz front end So that's how long it's been around since like 2014 before spring boot was even around and then when spring boot came out We you know adopted that as the back end framework and then over the years we've added Angular Not angular jazz right angular to and above is angular and then also react and view this set of instructions We'll guide us through everything and we're gonna basically build a gateway with spring cloud gateway And then we'll build a blog at microservice that has tags and posts and Entries and then a store microservice which just has products and you can upload images for those products So each app will also contain a micro front end and the reason for this is Jay hipsters default microservices Architecture actually generates a monolith on the gateway and the whole point of microservices is to kind of make everything Independently deployable right you should be able to work on the blog application and not have to redeploy the gateway And so up until we had micro front end support if you modified You know fields or entities and the blog microservice and it required UI changes Well, then you had to deploy the blog and the gateway and that's kind of violates the whole principle microservices So micro front ends allow you to package the front end for the blog with the blog artifact And so that means you can just deploy that and then the gateway will suck in the blog UI at runtime So it's pretty slick You'll need Java 11 node 16 Docker desktop and Jay hipster to complete this tutorial So I'm just gonna go ahead and put that on the right there and make sure I have all those installed So Java 17. Yeah. Yeah, it'll work and node. I do know that node 18 has issues with Jay hipster 7 So make sure and use node 16 and then Docker I Have running and Jay hipster. I'll just go ahead and install that just in case I'm using the wrong version. So Jay hipster 7 7 9 3 is the latest version. And if you use 7 9 4 If that happens to come out then everything should work there too. And so the table of contents here We're going to build, you know, Java microservices of spring boot and webflux So I'm going to use webflux for everything the gateway is going to be webflux regardless Because spring cloud gateway only supports webflux at this point. It doesn't support spring mvc And then we're going to run our microservices and then I'll show you how the micro front ends work And how you can get zero turnaround, which is awesome when you're working on UIs and then we'll build And run it with Docker will switch identity providers because it ships with key code by default And then we'll deploy it with Kubernetes. I don't know if I'll do that because it takes a while But then we'll have fun doing it. So I've installed Jay hipster 7 9 3 there. Let's just make sure Yep, and then we'll create a new directory. I'll do this in my downloads directory I got some stuff in there 8 micro front ends Jay hipster Now clear that out and we'll download the reactive microservices jdl that I created That's probably been like a year and a half and we'll compare that with the micro front ends version So we'll start with Jay hipster download reactive ms.jdl and this downloads it from a jdl samples repository So you can see that right there. That's on github. And then if we did it for micro front ends It'll download that one too. And then if you have the intelligent command line launcher installed you can do idea diff one Versus the other And you can see here the major difference is first of all i'm using react That's why i'm wearing the react shirt and then service discovery type is console The reason for that is we're going to make that the default in j hipster 8 And then instead of you know specifying the entities that'll show up in the gateway We're going to use micro front ends and say hey those micro front ends pull them from the blog and the store And then we do have to specify the client frameworks for the microservices now So has to have a react if you want to use cypress for testing that you have to specify that as well And then i changed the service discovery type and beyond that there's you know, not a whole lot of difference down here I don't need those microservice specifications anymore You know what goes where and i did add a couple new things for deployment with the docker and with kubernetes So otherwise, you know pretty much the same just subtle differences to support micro front ends And so there is this j hipster jdl plugin created by a guy at jetbrains It's pretty awesome. So if you want to actually modify, you know jdl in your ide and get co-completion And you know telling you when your syntax is wrong and everything I highly recommend that you can see there It's got five stars only four votes But you know I was definitely one of them and then to generate a microservices architecture with micro front-end support You run the following command. So j hipster jdl that reactive micro front ends jdl And then what i'm going to do is use mono repository And the reason for this is just demo purposes because if I didn't use it It would create a git repo for each microservice, which is probably how you want to do things in production It just makes it so it's one repo this workspaces command Makes it so mpm can run commands from the top level directory and applies to all the other directories Or the other projects. So I'm going to start with that And then while that's running you can see over here If you did want to change from react to view if you want to, you know, try this out Certainly use this demo script you can override the defaults in that jdl file with client dash framework, you know angular Or view and the reason for angular x is at one point, you know, we need to distinguish between angular js and angular and It's just legacy. So we will be defaulting to angular or changing that to angular for J hipster eight And so once that process is completed We'll go into the gateway directory and start key cloak and console using docker compose And you know what we could probably get started on that now. So go into gateway And start up key cloak. So I have a shortcut for that jh key cloak up And this is because j hipster provides Oh my zsh plugin. So it has all these aliases if you see jh there It's got a whole bunch of them So that's how I start up key cloak and then I can start up console as well jh console up And you know, those aliases are the same as these commands right over here Oh, well console loader config. I'm on an m1 max. And so that's why you know, there's that warning there But everything should still work and if we were to you know, open up docker desktop here You can see them running there. So that should be working And then if you're open up, you know, local host 8500 that's where console is running So that's all good to go And so we can start with gradle W to start that gateway and you can also use npm run app start But you know one command shorter than the other So I don't know I want to use one over the other But if you can't remember whether you know created the app with uh, maybe on a gradle Then that might be a use for that npm app start command And so we can open the root directory in intelligent And this will allow us to kind of show how everything's working We have obviously the gateway here and we have the blog here But let's look at the gateway first because that's got the micro front end setting for webpack uses module federation right From webpack. So if we were to go into this webpack micro front end file here We can see that uses a module federation plugin and the remotes are blog and store And it expects to be a little remotely, you know load those and it's got a bunch of shared objects as well Between you know this gateway and you know that microservice so currently we don't allow you to mix and match right you can't have like you know React in one microservice and view and another because these shared You know artifacts aren't going to play well together if you do something like that So currently we expect you to use the same client framework for each of your microservices And so that's you know the gateway that's sucking those in and then if we were to go to like, you know the blog and look at its webpack configuration You'll see that it specifies also the module federation plugin, but then it Basically exposes the entity's menu and the entity's route. So if we were to look at this file You can see it's got all the entities in there Right and then if we look at routes That's got the routes that'll be sucked into the gateway as well and allow everything to work So that's how the micro front ends are configured. Put that on the right there And see if everything's running Looks like it is so we can exit out of that one exit out of that one and open up local host 8080 Make that a bit bigger And then if we click sign in it'll redirect us to key cloak And we can log in And of course google chrome is smart enough to be like hey admin admin. What are you doing? But you know, those are the defaults. So obviously if you go to production Don't use those And then if you go to the entity's menu, you won't see anything because you know it hasn't loaded Any of those micro front ends because they haven't been started. So if you're looking the console here You can probably see you know 404 when it tried to actually grab those So now we'll want to start the let's say the blog microservice And this does depend on neo4j. I believe it is so jh neo4j up And then start it up All right, now that that blog is up and running we can refresh the page And there it is right. So if we want to create a new post we could be like first post which is always fun And uh some content And we don't have any blog so we can just save it and it's all working right it's talking to that database correctly So, you know, we could do the same for the store. Let's go back to our instructions and see what I'm supposed to do Yep, open the store and you'll see there's also this uh mpm run docker db up command Which can be handy if you don't know if you're using like mongo or neo4j or postgres or whatnot So if we go to store and then mpm run docker db up We're using mongo in this instance. So it's it's actually pulling that one down since I didn't have it installed locally And while that's going I should make sure and let you know that I think it's uh It's in our preferences here in docker You probably have to up your resources, right? I think the defaults are maybe a few cpus and I've upped it to six And then the memory is the big one because you know, we got a lot going on here a lot of containers And uh, so you might have to bump those up to get everything working What'll happen if you don't is uh, you know things just won't start because there's not enough memory Okay, so long goes up and now we can start it with gradle If we were to look at console You can see that The blog it doesn't like it what happened over here Source was empty. Uh, this is something new that I've seen where uh the health check for a neo4j doesn't work So we might have to comment that out But I think it's you know the app works, right? Like it's just uh something with that neo4j reactive health indicator It works fine when you're using spring mvc We saw this upgrading j hipster to spring boot three, but I didn't expect it to happen with spring boot 275 because what we're using everything still works. It's just like a false failure Or a problem with console. Uh, if we refresh here, um the store Come on. There it is. So the store, you know works and now if we were to refresh this one Then our entities are there for the store. So we could create a new project or product Um, I like beer. So let's uh, choose a file there And there we go And now we're you know saving to that mongo db repository. So slick. That's all working And so now I'm going to show you how to use zero turnaround All right development that sparks joy because why wouldn't you want to have joy sparked in your life in the gateway? All right, that's up here We can run MPM start and this will open up a development server Running webpack on port 9000 and so basically any changes you make will immediately be available here So that's using browser sync and so we can modify Gateway source main web app the home tsx to basically make a quick change So let's make sure and grab this we're going to put it below the h2 And then we're going to see this right here And we're going to go over here find that home dot tsx because we use typescript for everything and Jay hipster. So in the gateway look for that h2 Right down here Add it right here So I can just paste that in look you there. Hi. I'm a quick at it. So all that's working looks nice And uh, you'll see, you know, everything just happens right away. So pretty slick if we remove it It'll get removed right away too So nice zero turnaround when you're working on, you know, specific apps in this microservices environment But you do have to do the MPM start for them to get that, you know, quick turnaround And so if you wanted to get in the store directory, for instance, that's the one down here We can do MPM start as well And that'll start up on a different port So there's no port conflicts. Jay hipster is smart enough and then if we were to, you know, open this up a bit And go into product, right? This is you'll notice it doesn't have all the entities in here So what it allows you to do is just work on that specific microservice So it's still got the shell and we do require the gateway to be running The reason for that is just we didn't want to like incorporate Authentication and all that logic into each microservice. So it's just like a bare shell And then if you need to, you know, do authentication, whatever it does that on the gateway and comes back here So that's why we did it that way. It was just easier and you know, why complicate things And so in the wrapper around the div and product dot tsx, we can change it to have a background color So we want to see that, right? This otherwise you will change before you can command tab back to your browser. So BG info got to remember that class name BG info And then product tsx go over here Find it product tsx there it is Now we're looking for a row Or a div right there we go Boom Yeah, look at that. So if you were to go back to the gateway though And look here or even here right on 9000 and go to product It's not here because this one is not, you know, realizing what's changed on that UI. So It's still just isolated to whatever you're doing with that npm start command in each of those microservices And then the back end has Zero turnaround abilities to thanks to spring boot dev tools So if you modify the back end class and recompile it spring boot will reload that as well So it's pretty slick. I'm not going to show this and as far as looking under the hood of micro front ends We already talked about that, you know, looking at those webpack micro front end.js files And both of the gateway and in the blog All right, now what I'd like to do is show it all running in docker. So we're going to stop, you know, all these Various commands exit exit And we have all these docker images running. So I'm going to stop those with my t stop command And if you want to see the alias for that, um, it's basically right here This docker stop that And then we did create the docker compose Part of our jdl. So because of that, I created this whole docker compose directory with everything in it So we can open that up and check it out And there's a central server configuration, which has the application configuration that spreads or gets distributed to all the microservices So we're going to build docker images for each application By running this command from the root So that'll work if you're on a normal intel device, but I'm on apple silicon. So I actually have to use this command npm run docker arm 64 And so you can do npm run if you want to see like all the commands, right that are available So you can see you can build them for each individual one from the top level Or you can even go into each one and build them that way But because I use the work spaces command, that's why I can do everything from the top level so npm run And all that's running I can mention that to make key cloak work in this environment You do have to modify your etsy host file to have a mapping from You know one two seven zero zero one to key cloak And that's because how docker traditionally works is it communicates like from the blog app to neo4j Using a dns name that docker recognized. So it's like neo4j blog or something like that And that'll works because it's never exposed to the ui But in this case when you log in with key cloak, it's going to redirect and show key cloak in the browser So I haven't figured out a better solution This one seems pretty easy to do and it works. So You'll need to do that or it just will basically give you a you know host not found when it does that redirect So now that all those docker images are created we can start it up with docker compose up Or in the wrong directory so docker compose And so if you added dash d then you would you know not see any of this and you'd have to use docker desktop to see All the logs happening I like the prettiness of the logs and all the different colors and So that's why I did it this way and then you can kind of see when things are starting up So if you did open docker compose you can kind of or docker desktop you can see the individual ones So, you know one thing in here is You can see it kind of happening I'm not sure where the log was. It was easier the last time I used this so But basically there is a there's a pause, right? It's like waiting 60 seconds Well the gateway's already up. Maybe my machine machine's faster than normal That one's still going. I don't know. Well, let's use uh Old console to find out where are we at? So it looks like things are up and running We started an issue with neo4j, but like I said, that's been an issue with neo4j and source was empty even though it's up So the way you can do I'm going to show you how to fix this real quick I'll close that one if you go into the blog And you go into application Config right here, and you go into like help help um Yeah, management endpoint help you can go down here and do neo4j Enabled false So that's like actuators uh neo4j health check that's not working. Um, so I don't know why but you know hasn't been for a bit now But everything should be running. So if we want to go to, you know, local host 8080 here You can log in go to key cloak, you know, that's running. You can see it's up in our browser there and yes, cool. Sorry And uh, you know, we could do a post create a new post Howdy Happy Friday. It's Friday where I am December night there So that's all working Product right you can see that that change we made in the product is is in there and then you know nothing on the home So, you know, everything's working from that perspective and now what we could do is switch identity provider So we can we can close all these with a simple c I'll make this a little more visible here And so first we're going to register a regular web application on oszero So go to oszero.com Put this over here back to our instructions So log in I already have an account so Continue with github here Next one password it's pretty slick and then remember this for 30 days Oh, it doesn't like it try another method Security key got my ube key right here Remember for 30 days click it So if I go to applications, I can create a new application And we'll call it micro front ends And make it a regular web application click create And then we'll need to switch to the setting tabs and configure our application settings So the most important thing is a couple callbacks This one right here. So spring security expects a callback URL like this Typically, it's like, you know, right here, it's like oszero or octa or something like that The reason we use oidc is because we use the same callback URL whether using kiko or octa or oszero And then We'll allow a logout URL of localhost 8080 So those are the only things we need to do there and then we can save it And then in the roles section Create a new role So I think that's under what users security And we'll click the link Roles so we already have those in there There they are into user management And then a new user Which I already have and let's look at this user here They've already been assigned those roles right role user and role admin So you want to create a new user because you don't use you know the user you use to create, you know Your management account. So if you were to create a new one Let's just go here and create a user Or let me show you you create, you know email password or pre-password and then once you create it There is a next section. So let's see. I probably have an email. I haven't used here You'll notice here that it's pending the email registration, right? So one thing you have to do is is go to your email or set email as verified So otherwise like this won't work and then you go to the roles And you know assign those new roles there And then the next thing you need to do is add the groups claim or these groups, right role user role admin To the id token that's returned from out zero. So that's under actions flows And select login So we don't need a tour here. We just want to add a new action. So we're going to install a custom action We're going to call it add roles So create action Add roles And we're going to set it to uh, you know post login and node 16 And then we're going to grab this code here And you're going to see that changes the namespace to j hipster.tech And once they're authorized it adds their preferred username as an email And custom claim in the id token and the access token So we'll save that And deploy it and now if we go to the login flow We can drag it in there There we are apply it And then we can edit the docker compose application dot yml and append this yaml block so we can actually You know specify these os zero settings. So the cool thing is that you know, basically Bring security allows us to just override the defaults for key cloak and it'll start using, you know, a different identity provider. So If we go into that docker compose directory Right in central server config here And we don't even need these anymore And we need the os zero domain which we have back in our browser here That's this guy Well, let's get it from our app. So we make sure and not Mess it up That's the domain Put it right there Then you'll need it down here and make sure and have that trailing slash on there and then The client id the client secret And this audience here is created by apis And so by default there won't be an api But you can see there is one right here for me or go into there. It might be able to see the full URL Yeah, you can see v2. So you do have to create one. It doesn't create one by default But if you do it will be basically api v2 And so now we can stop all our docker containers, which we already did Docker ps nothing's running And we can start with docker compose up again, but make sure we save this file, right? I can check console to see if things are starting up Maybe they're already done. All right, let's try it. We'll close 8080 Now if we click sign in Should redirect os zero There we are except Authorizing the app and it comes back and now we're logged in with our os zero account. So, you know We can see all of our posts that we created earlier Um, or we could add a new one, right? We do like beer $10 in some states There we are You can also use octa for your identity provider if you're developing apps or apis and you want to add authentication to it We recommend you use os zero first It's just more developer friendly and you don't have to talk to any sales people You can just as you scale up you can pay with credit card, which is nice But for octa you can see j hipster's documentation It's very similar, but I recommend using the cli and uh, you know, you can actually do Whereas it octa octa apps create j hipster and it'll do everything for you So i'm trying to get that same sort of ability with os zero cli That's why I showed you through the web interface right now is because uh, the cli will just create a regular web app for you It won't actually do the actions for you won't do the roles for you But octa cli will actually create all that for you. So that's pretty slick and then you just configure it You know similarly down here and then if you want to deploy with kubernetes There is you know all of that in there. It did create a kubernetes folder For us. So if we were to go to you know, the kubernetes directory outside of docker compose You can see it's got all the files in there and you can just run kubectl apply dash f and it'll deploy To whatever, you know namespace you provide it. So this is what I specified You also you always should use, you know a different namespace in the default because then you can blow it away if you need to And we're clustering the uh, mongo Uh db for the store there and then everything else is just prompts that you normally get if you were to actually You could create, you know make dir k8s and cd into it and If you run J hipster kubernetes It'll prompt you for these various values and these are what I chose. So I didn't have to you know run a generator So I hope you enjoyed this demo and it helped you how to better, you know deploy your microservices with j hipster Use micro front ends if you can because then your microservices can be independently deployable Instead of having a monolith ui on the gateway So you can find the code on github At off zero micro front ends j hipster example And of course the blog post is on the os zero blog there Micro front ends for java microservices if you liked this video Please follow me on twitter. I'm at m rable My team is at octadev and of course Subscribe to our youtube channel so you can watch more videos like this that will brighten your day and make you a better developer Thanks. Cheers