 Hello Java developers, my name is Matt Raebel and today I'd like to show you how to build a beautiful crud application with Spring Boot and Angular. Let's giddy up. This screencast is based on a blog post that I wrote called build a beautiful crud app with Spring Boot and Angular. And so it shows you not only how to get them running as separate applications, but also package it into one artifact that you can distribute as a jar, which is how we like to develop our Spring Boot applications. So if you scroll down in the blog post, you'll see one of the first thing is a prerequisites, Java 17, that's because Spring Boot 3.2 requires it, Node 18, and that's because Angular 17 requires it, as well as HTTP IE, which we're not going to use in this demo, but is useful if you do the steps in the blog post, the OZero CLI, and an OZero account. And so what I developed for this crud application is a simple jug tour because I like to do jug tours, and rather than step through each individual step, I believe that you could do that yourself, right? You could read through the blog post or there's a demo script that I'll show you that you could use. And what I want to show you is just how to get it all running because that's much easier, and you can do it in under 10 minutes. So down here, it points to a GitHub repo here, Octadev, OZero, Spring Boot, Angular crud example. And so I can just copy this git command, so I'm going to open up a terminal window and then CD into my downloads directory, and then the git clone command. That creates a jug tours directory and we can open that up in IntelliJ. And so there's an app directory, that's where the Angular app is, and then the Spring Boot directory is the main directory, that's where the project is. So you'll see in this readme here, it gives that git clone instruction, but also it tells you to run the OZero CLI and run the OZero login command. So let's just make sure I have the OZero CLI installed, OZero version 130 while we're here, make sure we have Java 17, Java 21, even better, and node 18. All right, now we'll put this on the left, all the way around the right, and we'll put this on the left, and make that easier to read. And so we're going to run the OZero login command to connect with our tenant. As a user, press enter to open a browser, confirm, and it will prompt us for consent for all the different things OZero CLI can do to our tenant. Now we're all set there, and it says we're successfully logged in, so we can clear that, and then run OZero apps create. And the important things here are this callback URL with 8080 in it for Spring Boot and Spring Security, that's the callback URL expects, and then for doing the authentication when you're running Angular with NG serve on 4200, that's another one it needs. And then the logout URLs are 8080 and 4200. If you want to use the OZero dashboard at manage.ozo.com, you can do that just make sure and use those URLs as well. And so now what we can do is copy the results into an octa.env file, create this at the top level. And you might notice it's already been ignored and get ignore right here, both for Windows and for Mac Linux. So we're going to copy our OZero domain in here for the issuer. Make sure and have that trailing slash and client ID, once we have those up we can go back to our instructions. If you're on Windows you'll want to name the file .octa.env.pat and use set instead of export, or if you want to set your environment variable some other way, go ahead and do that, that should work just fine. So for the Mac we have to do source.octa.env to set those environment variables. And then we can start it with MVN spring boot run dashp prod. And so what the dashp prod does is it actually downloads node, installs it and then builds the Angular app and packages it with the spring boot app. And there's some things you have to do the spring boot app to set up CSRF and to make sure everything's packaged right and there's a spa web filter that forwards the routes to Angular when necessary. So please read the blog post or there's this demo script in here at demo.adoc that if you have the ASCII doctor plugin it'll render it nicely and this has all the individual steps. It's just basically a condensed version of the blog post that makes it easy to just copy and paste. And I also have IntelliJ Live templates that I've updated so if you want to run certain commands to do the SBA event, SBA group, if you import those live templates you can use those or you can just copy them right out of here. So nice little demo script that you can do if you want to on your own. And this one's just designed to get you up and running. So now that that's running let's go back to the readme, see what's next. Of course we want to see if it works. So the next thing is to log in. So we'll open up localhost8080, click log in and it'll prompt us for consent. So this is bootiful Angular that Apple just requested, wants access to our profile and email and boom we're in. So now we could go here and add a new one. For instance the Dallas jug is one of my first stops next April and you can even edit it and add an event. So for instance this plus button right here that is 423, topic is Matt Rabel, TBD. So there we are, that's all working and then if you go back to home you can of course log out. And the cool thing is there's also Cypress tests in this project so you can add your Cypress settings to that octa.env and then you'll be able to run the Cypress test. Of course you don't have to add them to this file but since it's ignored you might as well right? So it's easy enough to grab that 0 domain, just the raw value and then my email is mrable. And then we can open up another window, cd into the app directory since that's where it's located. Make sure and source the octa.env and when I say where it's located I mean that's where the Cypress tests are located. So you could do npm run e2e and that would run them all headless but I like to run them with nge2e so we can kind of see them running. So we can run them in electron just for kicks and this group's one of the main one it basically tests the crud on the groups so you can see it logs in there and it logs in and logs out between each test run but it's basically verifying that you know the list works, the edit works, the delete works, all that and there we go. Add button works, adds a new group, edit a group, all that. So then we can close that down, go back to our readme and you'll see here there's also a main.yml that I use for github action so if we were to open that up you can see in github workflows it sets up java, checks out the project and then runs mvn verify that makes sure all the tests pass and then it goes and use the Cypress action to start the app, run it on 8080 and test it all and then all these secrets are stored in github and then if there's any failures it uploads the screenshots at the end so that's pretty slick and in here you can see that all the workflows are passing right so this goes to that OZ0 Spring Glutangular Crud example on github all the workflows are passing even when I updated it recently and if we were to go into settings, secrets and variables you can see where all those repository secrets are and then another cool thing you could do if you go to manage.OZ0.com you could update the app to use pass keys so this is already using pass keys that's why prompts me to log in there I can use touch ID and then if I go to authentication authentication profile click identifier first so save that go to database go to pass key authentication methods and turn on pass keys and so now the cool thing is I can go to my app Glutafalangular and I can say for the connections use pass keys not username and password right and you can still have Google social if you want there but now if I was to go and log in you would see it just prompts me for my email address but I can also continue with the pass key so I haven't created one let's go ahead and mrable or actually you have to do the sign up I think and then you have to do mrable at gmail.com continue and then create a pass key we'll do an our cloud key chain here use touch ID to verify it accept and now I'm using pass keys to log into this application so that's pretty slick right I like that so again if you have any questions about how everything fits together what the code looks like go ahead and clone the project look in the app directory for Angular look in the main directory and the source directory for spring boot and you know everything's in there security configuration and all that it's always fun to look at the security configuration right and you know enjoy enjoy using spring boot enjoy using Angular and enjoy using A0 you can find me on LinkedIn at mrable you can find me on Twitter at mrable you can find my whole team at Octadev on Twitter and of course subscribe to our YouTube channel so you can watch cool demos like this one and learn how to make your full-stack apps more secure cheers