 Hello and welcome, my name is Micah Silverman and I'm a senior developer advocate with Okta. And today I'm kicking off our series called Noob Tube where we take on a topic or technology that we're not familiar with as developers. So my good buddy Matt Rable's been talking to me about Java Hipster, J-Hipster for years and I have never dug into it. Now I have done a lot of work with ViewJS and Spring Boot and I've never put them together with Java Hipster. So I'm gonna see if I can go from zero to an application integrated with Okta in one setting, one session here, 10 minutes or less. That's what I'm shooting for. Let's see how we do. So I'm gonna kick it off. I'm here at the jhipster.tech page and I'm gonna scroll down past the sponsors, Java, Okta's one of them. I wanna find a quick start. Now here's a 15 minute quick start with Matt which I'm sure is great. I'm gonna jump right into this quick start and one thing I do know is that out of the box, J-Hipster has built-in support for Angular and React but not ViewJS and I wanna do ViewJS. So I'm gonna scroll down a little bit further and see what I need to do for View. I think, let's see, here we go. So modules and blueprints. I don't know what blueprints are but I guess they're extensions to J-Hipster. Let's look at ViewJS because that's the one that I want. Okay, scrolling down a little bit. Here we go. NPM install generator J-Hipster ViewJS. Now I wonder if I need to install the whole thing first and then do that. All right, I'm gonna do this first and I'll speed this up so y'all don't have to suffer through this installing. All right, that's done. Let's go back to the ViewJS blueprint and now I'm gonna do this one. Yo is outdated. All right, let's fix that. I did notice also that I'm using node 11 and I do have 12 installed but let's see if it goes okay with node 11. All right, now let's see usage J-Hipster-BlueprintViewJS, okay. Now I saw something on the quick start. Let's just see here. Okay, so I'm gonna do this. We'll start an application. Okay, and now let's do this with the ViewJS blueprint. So target J and it's not compatible with this J-Hipster version. Either update the blueprint or J-Hipster. You can also disable this check. Okay, J-Hipster 660, target J-Hipster 65. All right, so it looks like I may have to install an older version of J-Hipster. Now I'm gonna fast forward through all this but I'll do that and come back. All right, I'm back. I've uninstalled everything. Let me try and reinstalling. Let me give it a specific version. Still says my version of Yo is outdated. I wonder where that is. All right, so now that I did that, let me reinstall ViewJS. All right, potential issues. Let's see if this will work this time. Could not retrieve version of J-Hipster declared by blueprint. Use at your own risk, all right. I'm using a wrong version of node. All right, which type of application would you like to create? Let's do a monolithic application. Base name will be my app. Let's say com.octa examples. JWT, here we go. All right, so I'm looking to authenticate with Octa so I'm gonna choose that one using OAuth and OIDC. No database, keep it simple. No cache, maven. Which other technologies would you like to use? I don't want any. Which framework? All right, ViewJS, excellent. Would you like to use a boot swatch theme? I am not familiar with boot swatch, but I don't know, let's try darkly. Let's do dark. Internationalization, always, but I'm not going to this time. Test frameworks, I'll leave it at JUnit and Jest. No other generators. I'll pause again and update Xcode. I just updated to Catalina, so there may be some stuff missing here, but let's just see. MVNW, let's see if it runs. I'm gonna bring up another one, so let's start here. We're on maven for the spring boot side of things. While that's going, I'm gonna jump over in a new window here and let's go over to my app and we'll do MPM start. So it looks like our front end is running, still waiting for Java here. I'll speed pass this. We didn't quite make it, something went wrong. Okay, so it's looking for a security parameter and I'm assuming it's upset about our open ID configuration because I haven't given it any yet. So let's see if I can resolve that. To the Google, this is from 2017. You can see all these blog posts. Let's go to Jay Hipster's docs. Here we go, octa, this is what I'd like to do. All right, so let's go and open up this project in IntelliJ and see if we can start configuring it. Projects, my app, here's our POM. Open it as a project. Oh, of course it's right here in the readme that it installed, so should have had that in there. All right, cool. So let's go to source main resources. Let's add an application YAML. All right, cool. Now I am gonna go over to my browser and I'm gonna use a handy resource which is the Heroku add-on for octa. I have a lot of applications so I'm gonna make a new application and I'll call it Jay Hipster first try. And let's add, I'll create the app. What I wanna do is add add-ons, here we go. I'm gonna add octa, okay. Now what this is gonna do is provision for me an octa org with everything that I need in it in order to configure this new Jay Hipster app. So I'm being a little lazy here. I'll speed through this. Now that I've created an octa org, I can go over here and look at my config variables and wouldn't you know I have everything that I need for my Jay Hipster app. So let me grab these variables. There's my issuer, here is my client ID and here is my client secret. So I can replace these values client secret, client ID and issuer. All right, let's try and fire this up again. All right, not quite there, connection refused. All right, so it looks like it's, oh unable to, it looks like it's trying to do some in-memory thing by default even though I chose octa. So I'm gonna do a little research and come back. Okay, I'm back. I've made a little progress but I'm not quite sure I'm doing things in the right way. We'll see if I get some feedback later but going over here to the documentation I should be able to just take this little snippet and put it into source main resources application URL, application YAML. Now that did not work but I did find that there's a source main resources config application YAML that's already there and it has its own security section and so I added in my octa information there and that seems to at least let us get the application started. So now we can see that spring boot starts all the way up. So now let's go see if we can log in. Here is the front end and I'm gonna go try to sign in and I immediately get an error. Now I know what to do with this. This is because it's trying to redirect up here. It's trying to redirect over to this URL and I have not set that up in octa. So let's jump over to my octa org and I'm gonna log in there. Now I'm already logged in because of the magic of Heroku SSO. I'm gonna go over to the application that was automatically created for me and I'm gonna add this as a valid redirect URI. Okay. So let's once again try to log into my J-Hipster app. Sign in. All right. So I'm logged in as this randomly generated user and so now I have a fully functioning Vue.js app that's able to authenticate over to octa. Now you didn't actually see the authentication step because I was already logged in but it did do the dance, the open ID connect dance because it got my user email. If this looks like garbage, it's because it was randomly generated when I created the octa org using Heroku. So little bumps on the road but and I do have some questions. I will follow up in comments if I get those questions resolved or maybe some of you J-Hipsters out there already know what the deal is with this business here in the application YAML. There's a source main config application YAML. There wasn't a source main resources application YAML. I made that one. The instructions here say that I should go and modify source main resources YAML but there wasn't one to modify and it seems to be ignoring that one. So questions, but in the end it all worked. So I hope you've enjoyed this edition of NoobTube. We'll have more coming at you soon.