This tutorial will walk you through the steps of building a full-stack Spring Boot VueJS Example with TodoMVC, REST APIs, JPA, Hibernate and MySQL
What you'll build
What you'll need
- JDK 8+ or OpenJDK 8+
- Maven 3+
- MySQL Server 5+ or Docker CE 18+
Init project structure and dependencies
Project structure
├── src
│ └── main
│ ├── java
│ │ └── com
│ │ └── hellokoding
│ │ └── springboot
│ │ └── fullstack
│ │ ├── todo
│ │ │ ├── Todo.java
│ │ │ ├── TodoAPI.java
│ │ │ ├── TodoController.java
│ │ │ ├── TodoRepository.java
│ │ │ └── TodoService.java
│ │ └── Application.java
│ └── resources
│ ├── static
│ │ ├── todo.css
│ │ └── todo.js
│ ├── templates
│ │ └── todo.html
│ └── application.properties
├── Dockerfile
├── docker-compose.yml
└── pom.xml
Project dependencies
Create JPA Entity, Repository, and Service
Define REST API, Controller and View Template
REST API and Controller
FreeMarker/HTML View Template
Static Files
Config and Run
Application Configurations
hk-mysql refers to Docker Compose service defined in the below docker-compose.yml file
spring.jpa.hibernate.ddl-auto=create allows JPA/Hibernate auto create database and table schema for you
On production environment, you may like to disable the DDL Auto feature by using spring.jpa.hibernate.ddl-auto=validate or spring.jpa.hibernate.ddl-auto=none (default). Check out this example as one of the approaches Flyway Example of Database Migration/Evolution with Spring Boot, JPA and Hibernate
Run with Docker
Prepare Dockerfile for Java/Spring Boot application and docker-compose.yml for MySQL Server
Type the below command at the project root directory, make sure your local Docker is running
docker-compose up
Run with Maven and MySQL Server local
Update hk-mysql on application.properties to localhost and type the below command at the project root directory
mvn clean spring-boot:run
Testing time
Access to localhost:8080 to see the app