Bootiful Development with Spring Boot and Vue
Vue is a lean and mean JavaScript framework. It has a smalling learning curve and is great for mobile apps. Learn how to build a Spring Boot API with Java, a Vue UI with TypeScript, and secure it all with OIDC.
Luiz França Dos Santos
Great arcticle, but it uses two ports 8080 and 8081 and two http servers…I prefer rather to have everything inside of a tomcat or jetty having gradle and webpack building the app to me. I have made a small project as example and I put it github… https://github.com/LuizClau…
Matt Raible
Yep, I hear this a lot from developers - they’d rather have one artifact than two. I wrote posts about how to do this with Angular and React. I’ll see about adding a follow up post that does this with Vue + Spring Boot.
IMO, I think the experience is much better if you use Vue’s CLI rather than Gradle to rebuild every time you change something. I asked my Twitter followers back in August which deployment model they preferred and most said separate apps.
Thanks for the link to your example. Good stuff! 
Luiz França Dos Santos
Thanks for your answer, regarding the gradle bulid in that repo in githut, you could run “npm run dev” inside of the folder frontend and it will refresh the SpringBoot static folder for each change in the js files, it is a simple “npm --watch”, anyway, shame on me, I should be done a better jod in the README.md of the git repo, but I am not sure if it is the best approach, but it is option, I guess. Anyway, keep the good work in the blog and thank you for the nice article.
Carlos Vega
Congratulations Matt, excellent post !!! Can you explain the interaction between Resource Server and Okta Authorization Server? I mean, the client project send the Authorization token (by http headers) to the Resource Server and then what kind of validation happens? Only locally (token expiration date) or Resource Server send a request to Okta?
Matt Raible
Hello Carlos. Good question! Our Spring Boot Starter offers a few features:
- Simplified configuration
- Automatic claim (i.e. groups) to Spring Security authorities mapping
- Improved local access token validation (we validate the audience claim)
We do not send a request to Okta for validation.
Carlos Vega
Thanks a lot!! I will consider this approach in my project and avoid the verify extra request. Good luck Matt!
Sylvain LGenka
Excellent post !!
I followed your tutorial, but I have a problem when I try to display the “good beers” page once I passed the authentication with okta. Indeed, the call to the api through the url http://localhost:8080/good-beers failed with the message Error in created hook (Promise/async): “Error: Request failed with status code 401”. I can’t find what’s wrong, can you help me ? Thanks
Matt Raible
Hello Sylvain,
Did you make sure you’re passing an access token to your API in client/src/components/BeerList.vue? If so, you might try comparing your code to the example on GitHub.