 Hello Java hipsters, my name is Matt Raebel and today I'll show you how to use Micronaut for J-Hipster to create a new Angular app with a Micronaut back in and then we'll deploy it to Heroku and we'll integrate it with Octa. Let's get started. So Micronaut, if you go to micronaut.io you can learn a bit more about the project itself. It's a modern JVM-based full stack framework for building modular easily testable microservice and service applications. So it's polyglot framework, supports many different languages. Currently the implementation in J-Hipster only is in Java. They really try to make things really fast and low memory consumption. There is the generator J-Hipster Micronaut, that's the blueprint for J-Hipster. And how blueprints work in J-Hipster is you can create a blueprint to overwrite what is the default. So in this case it's overriding spring boot and it's using Micronaut instead. And then I have this Octa J-Hipster Micronaut example repo where I created everything you can find the final source code and all that. And in here I have a demo.adock which is an abbreviated list of steps to perform this screencast. So I'm going to look at it and ASCII doc to make it look a little nicer. We're using Micronaut 2.0 in this example and we'll be able to add Octa to Heroku in just one command and deploy to Heroku. So that's pretty slick. Let's go ahead and put that on the left and we'll open a terminal on the right here. And you'll need Java 11. I have it and node 12 or greater. I'm on node 14 and Docker installed and running. And you'll need a Heroku account which I've already set up. If you don't have one you want to go to Heroku.com. Go to sign up for free and create one there. So in this screencast we'll build a Micronaut app with J-Hipster. We'll start with a J-Hipster domain language file which defines what the whole model looks like behind the scenes and how things are related to each other. We'll deploy to Heroku and then we'll build a Docker container and I'll show you how to deploy that to Heroku as well. So we're going to build a simple app that allows you to record space launches and add images to the event. It looks similar to NASA's launches and landings. I don't know if you've seen this. It's just basically a listing. Now I'm not going to do all the work with the CSS to make it look this nice but I will have all the data model in place that you can make something look like this. So we'll install a J-Hipster in the Micronaut Blueprint using MPM. So I recommend these versions 6.10.1 and 3.8 for generator J-Hipster Micronaut because I've tested them and I know they work together. So you can certainly try greater versions and they should work but I can't guarantee it right here you'll be able to watch me use these versions and everything will work just fine. So we'll create a directory called spacefan and then we'll put an app.jdl in there and I'm going to use this one here. You can see here's an application. This is how a basic application is defined and J-Hipster has a number of defaults. So all these are doing is overriding the defaults. Application type is monolith by default so I just explicitly specified that I didn't have to. The authentication type is JWT by default so that's why I'm specifying a lot too. Package name is a little different and I want to use Postgres for production not my SQL and I want to add in protractor there and then we have a few events a space event with a name, date, and description and a photo and then the mission as a name and description, the event type, launcher, landing and then the relationship right there's a one-to-one between space event and mission and there's some pagination rules infinite scroll and just regular pagination. So you can grab this whole thing and put it into this file and then save it and then instead of running J-Hipster what you'll run is M-Hipster. So M-Hipster import JDL app.JDL. So you see that took about three minutes to run this will vary depending on your hardware and your internet speed and if you're recording your screen like I am sometimes it takes me you know 40 seconds to create one sometimes you see times like this so this kind of depends on your environment. By default when you choose OAuth 2 for J-Hipster it uses key cloak and we like that because it runs in a Docker container and we can automatically populate it with the J-Hipster clients register their login redirect URIs put in users passwords all that kind of stuff so you can start that with Docker compose source main Docker key cloak up dash D to run in as daemon but I also have a shortcut using Omice CSH so I can do J-H key cloak up and it runs that same command so once that's up you can run mbnw to start the app once it's finished starting it can open up localhost 8080 and click sign in you'll see we got a cool new logo for a micronaut there and you can use admin admin and you're it this is actually a warning from Chrome that they detect if the username password has been in a breach and so admin admin people try use that before so we can go to entities right and see the space mission now there's a bunch of data in here already and the reason that that exists is from fake or JS project that we use to create fake data only in development and we found that developers like this because they don't have to go in and add new records just to see if stuff works right they can edit existing ones change something from progressive to progressive to right and then it updates it or they could delete ones and they could also create a new one right new event pick a picture because pictures are required Argentina there mission is Vermont Center and now it's been created right down here at the bottom so that's all working you can also go to the administration see various metrics for the timings on the different requests it's making there's also help in here for the disk base and database configuration if you want to see all the different properties that are set or being used some auditing as well as logging and so if you were to look at not right you could change its logging from warn to a info if you want to switch the language you do that as well and you'll see it's all in French now so back to English and back to my instructions here the next thing I want to do is show you how to turn off faker under source main resources application dev that YML search for a faker and you'll see that there's liquid base and it's got two different contexts right dev and faker enabled we can turn that off and now we won't have fake data when we restart it can also run npm run e2e since we chose protractor for testing they'll actually test our full UI and make sure all those generated entity screens and all that works you can see that took about 50 seconds to run when I've done it before it took about 35 and you can see that some of these have longer timings a lot of that's because the library that we use an angular to do alerts there's something in protractor where it actually has to wait for those there's an open issue about it we are trying to fix it it shouldn't basically sit there and wait for those to go away so now we can deploy a micronaut to heroku so we'll shut this down here exit there and clear here and all you have to do is type well heroku login so you have to be logged in heroku first you know pop a browser log you in okay so I'm logged in so I can go to heroku.com now and I could also do heroku apps and see what apps I have right here and so micronaut space that's one that I want to deploy to so I'm gonna go ahead and delete it and then we'll do M hipster heroku and it'll prompt us for a few things first of all the prompt us for the name that's the micronaut space this has to be unique if you put in a not new unique one it'll prompt you for a different one we'll do it in the US we'll compile it on heroku we use Java 11 this question it says you are using a lot too do you want to use octa as your identity provider so we're gonna say yes notice that it requires that curl and jq are already installed so I do have those installed so I will use just mrable at gmail.com password and it'll prompt you to change this after you've done this process but you need to create an admin user to act on the behalf for you with J hipster and then we'll go ahead and you know do heroku's magic to first of all upload it when it prompts you to over at palm.xml do that so it'll do a git push and then on heroku it'll actually do the whole build process so normally if you have a fast laptop doing it locally and uploading the jar might be faster but if you don't have a fast laptop or a slow internet it might be better to just do git push and then let heroku do it for you so you can see that took about 10 minutes to run your time will vary I've done it in five minutes before so it really depends on internet speed and if you're recording your screen you can run heroku open to open it up in your favorite browser you see look you there it's all working so now we can click sign in now redirect us to octa and this is our new developer account it created for us we were mrable at gmail.com and then it'll prompt you for your old password and you can change it to a new one and then I'll prompt you for a password reset question and this is just so if you lose your password you can actually recover it and be able to log in again and redirect you back to your app and you're logged in right you can see the entities there aren't any because we haven't created any but we could go ahead and create a mission soon and you can see it's talking to Postgres and that's all working so pretty cool that you know you can deploy to heroku and configure it with octa and only one command well there's another thing you can do and that is build a docker image of your app and deploy that to heroku so next we're going to use jib to build a docker image of our app and jib is basically a tool from Google that allows you to build an image without having a docker file it uses settings in your maven or gradle build and basically calculates a lot of the ways that it should be building so we can just run mvnw prods specify the production profile verify and jib docker build so by default jhipster creates a number of docker containers for you you're looking source main docker there's one for key cloak there's monitoring there's Postgres right these are all the containers you can run in production as well as app yml you'll see that it's got the space app right that's the image that we just built it's got the Java options the micronaut environments the JDBC URL to talk to another docker container the OAuth definition to talk to key cloak and docker containers usually talk to each other using names within the same network but what happens with key cloak is it's gonna redirect you in the browser and it's gonna have this you know in the URL so we do have to make sure that key cloaks define an Etsy host so you see there I have a key cloak pointing to one two seven zero zero one so you do need to make that change to run everything with docker composed locally so we can now we can run these two commands to turn off key cloak or shut it down and then restart everything now we should be able to log in and prove that our docker image is good to go and will work they were already logged in as the user and if we were to go to entities you can see there's some in there it looks like it still has that faker data but shouldn't be a problem in production so let's go ahead and create a new app on Heroku for this docker container we just control C to shut all that down so it'll create a new app for us and then we can add that as a remote get remote add call it docker and then we'll go ahead and this one and we can log in to Heroku's container registry using Heroku container colon login and then we can do docker tag the name of our engine is space or name of our image is space if you want to change that you could go into palm dot XML and change that and registry.heroku.com and then the name of our app which is this Rocky Craig here and web and then docker push Rocky Craig web and so you can see that's pushed to Heroku now and the Postgres and Octa add-ons that we used before when we did M hipster Heroku we can reuse those and we want to because especially for Postgres that one's already got the tables in the schema created for using liquid base that was part of the deployment process versus a docker container right you're just deploying an image you don't have any ancillary processes that run as part of that we'll do Heroku add-ons and we'll look at the one that was originally created right so this has that octa and that Postgres add-ons in there and we can attach these to our current application so you can do Heroku add-ons attach and then the Postgres name which is this area here and remote is docker right so removing it from Heroku to docker or we'll actually be using it on both so we have a couple get remotes right get remote for Heroku and docker so now we can do another attach but this time it'll be for octa okay and you'll see it actually copied all the configuration variables over there so if we did Heroku config remote docker you can see we have a number of settings now and if we compare that with Heroku they're pretty similar the difference is with Heroku we do some stuff to actually set the environment variables and to know how to talk to that Postgres database with the actual docker container we need to set some JDBC database URL and username and password environment variables so it knows Micronaut knows how to talk to that Postgres instance first of all I'm just gonna grab the database URL and then I'll put that into a text editor here bump that up a little and then we'll grab this code here so these are environment variables that are defined in Heroku's profile this JDBC database URL username and password you might notice those aren't standard Micronaut property names or data sources the database URL is everything past the at sign there right and then the username is everything before the colon and the password is this right here and so that command returns right in this syntax Postgres username password address that's how I was able to figure that out so now we can set those commands or set those environment variables and now we can specify Micronaut's environments to use so it's using prod and Heroku for their environments and then the job ops it only needs 128 megs and there's actually another one I forgot but that's in the I can look in the proc file that it creates and that's this Micronaut M deduction this basically allows you to specify the environments without Micronaut trying to do it on its own and then we can release the container and start the app or we forgot the remote Docker there so Heroku container release web and specify the remote because we have multiple in a project and now we can do Heroku logs tail remote Docker and there it is up and running so we can we don't want to click on that URL because it's local host but if we were to open up another window and do Heroku open and this is our Docker container right Rocky Craig can we sign in nope and this is a combination that people see with Octa there's basically a redirect URI that doesn't match what's in our app settings so if you look up here here's the redirect URI it's trying to get to right and so Rocky Craig isn't in there so I like to just grab this URL and then Heroku is still gone here we can log in as an admin using this Octa thing right here and it can go to the web application is the one you want to modify so right in here web go to general and then add these new login redirects so we got that and then we need this part on the end and then we just need this down here slash log out so now with our Rocky Craig try again and this is there right because we're logged in as an administrator go to new incognito sign in and a secret of octa is you don't actually need the at sign or anything beyond that for the password you can just use the username now we're logged in right and we're an administrator so we can see everything our Docker container is working and you'll notice there's no data right there's no faker data being put in there except what I entered previously because it's using the same database you can also go to security headers calm try out that URL and look at that gets an A right so there's all kinds of good security headers that keep our app secure that's about it again the code is on github at octa j hipster micronaut example I hope you've enjoyed learning about micronaut and j hipster it's a nice integration I've done a lot of work to figure out the kinks and solve them so you could have this nice working screencast if you like this screencast you should follow my team on Twitter where octa dev is also myself at m rabble on Twitter and we have a YouTube channel that you're probably watching this on right now so please subscribe and hopefully you'll love our content that we post a couple times a week thanks for watching and have a nice day