Spring Boot Vuejs

Abstract

1. Introduction

Single-Origin Policy (SOP) could be a problem if we want to develop our app. Because the webpack-dev-server runs on http://localhost:8080 and our Spring Boot REST backend on http://localhost:8098.

A live deployment is available on Heroku: https://spring-boot-vuejs.herokuapp.com

We need to use Cross-Origin Resource Sharing Protocol (CORS) to handle that (read more background info about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

2. Objective

Example project showing how to build a Spring Boot App providing a GUI with Vue.js

This project demonstrates how Java, Spring Boot, Vue.js can be applied to a real-world Full Stack Web Development problem.

4. Technology Stack

• Angular 2 isn’t the way to go if you know version 1 (complete re-write, only with Typescript, loss of many of 1’s advantages, Angular 4 is coming)
• React (facebookish problems (licence), need to choose btw. Redux & MObX, harder learning curve, slower coding speed)
• Store the login state
• Redirect user from Protected.vue to Login.vue, if not authenticated before

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• JDK 11 or later
• Maven / Gradle
• IntelliJ IDEA, Eclipse or Android Studio
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/jonashackt/spring-boot-vuejs.git
cd spring-boot-vuejs

spring-boot-vuejs
├─┬ backend     → backend module with Spring Boot code
│ ├── src
│ └── pom.xml
├─┬ frontend    → frontend module with Vue.js code
│ ├── src
│ └── pom.xml
└── pom.xml     → Maven parent pom managing both modules

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by jonashackt and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.