BUILD A FULLSTACK APPLICATION WITH SPRING BOOT 3, VITE & BACKBONE | BEGINNER

In this video we put together a complete full stack web application using Java Spring Boot to handle server-side requests, and some small Backbone.js code to handle JavaScript interaction as a frontend.
We're using a modern bundler called Vite to handle the dev and bundling of our JavaScript, and finally Maven to package everything together with our server when packaged up.
I hope you had some fun with this tutorial!
👉👉Grab the source (on github): t.ly/lhEZC
🔗Grab My Other Products Available:
- Build Your First Web Service API Using Java Spring Boot wazoowebbytes.gumroad.com/l/x...
👋🏻Connect with me:
Twitter: / eyuzwa
🔗Resources & Links mentioned in this video:
- Spring Initializr: start.spring.io/​
- Vite: vitejs.dev/guide/
- Backbone.js: backbonejs.org/
Credits:
- I've been using a variation of the same templateFromUrl first mentioned here on Stackoverflow (stackoverflow.com/a/19766275) - I've just been heavily modifying it for whatever project I've been on
===---=== Concepts & Technologies ===---===
- MVC
- Fullstack Application
- Spring Boot 3
- Vite
- Backbone.js
- Maven
===---=== Chapters ===---===
0:00:00 - introduction
0:03:30 - start.spring.io
0:04:36 - opening project
0:05:35 - application.properties
0:07:13 - spa controller
0:08:20 - rest controller
0:10:48 - vite template
0:12:51 - npm run dev
0:13:52 - install frontend deps
0:14:25 - vite.config.js
0:18:15 - setting up router
0:24:48 - setting up default view
0:35:27 - templateFromUrl function
0:40:55 - setting up about view
0:45:45 - event handler
0:52:15 - calling the api
0:55:20 - setting up a proxy
0:58:28 - packaging in pom.xml
#Java
#SpringBoot
#Fullstack

[@wazoowebbytes]

I had a LOT of fun putting this proof of concept together of legacy and modern JavaScript using Vite! I hope you're able to learn something from this. Please let me know what you think!

[@theodoreivanov6257]

Like you, Backbone helped me in my understanding of MVC in web applications, as it is closer to what I already know in matters JS than say React. Great lesson in how to bind a Java back-end with a JavaScript front. If you could build upon this to show how to get data in and ouf the H2 database, it would be awesome.

[@wazoowebbytes]

hey thanks for the feedback and suggestion! It's a good one to think about for sure...not a bad idea at all.

[@jopadjr]

5th...Thanks

[@JelleJelleJelle]

How would you incorporate SSL? The proxy doesn't seem to work with HTTPS. Getting 403s.

[@wazoowebbytes]

hey Jelle! I tracked down this vite plugin that the team recommends for setting up SSL locally - github.com/vitejs/vite-plugin-basic-ssl then hopefully you can just set vitejs.dev/config/server-options.html#server-https to true. Hope that helps!

[@avidreader6534]

could you make a simple hello world tutorial with spring boot and react and show us simply how to route the mapping from react server to springboot controller server so that we can understand how to map the two together better? I'm having a hard time wrapping my head around using the same http url to send a request thru react frontend to spring backend and return the spring data to react server to be displayed by react. Thank you for your other tutorials as well.

[@wazoowebbytes]

Thank you SO much for this feedback! Yes, indeed, I can spend more time on this subject for sure. It's not just a "React issue", but every frontend library or framework has to deal with this