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

Source code

https://github.com/hellokoding/hellokoding-courses/tree/master/springboot-examples/springboot-todomvc-mysql-vuejs

References