HTMX + Spring Boot + TailwindCSS

日本語版 README はこちら

I created this project for learning Htmx and Spring boot.

This project implements the following features.

• Search user
• Create user
• Update user
• Delete user

This project consists of two projects: front-end (Htmx) and back-end (Spring Boot).

project_root
├── frontend (Htmx)
└── backend (Spring boot)

Contents

1. Demo
2. Project Overview
3. How to use
4. Run test
5. Swagger

Demo

Create User

Update user

Delete user

Project Overview

Front-end

• Htmx
  • Verification of input values
  • Submit form
• TailwindCSS
  • Screen design/layout creation
• FlowBite
  • Show/hide modal control
• Vitest・Puppeteer
  • Implement E2E test

Back-end

• Spring Boot・Java
  • Search user
  • Create user
  • Update user
  • Delete user
  • display user creation modal
  • display user update modal
  • display user deletion modal
• JUnit
  • Implement unit test

The versions of major libraries/frameworks used in each project are as follows.

Front-end

• Htmx: 1.9.12
• TailwindCSS: 3.4.3
• FlowBite: 2.3.0
• Vitest: 1.5.3
• Puppeteer: 22.7.1

Back-end

• Spring Boot: 3.2.0
• Java: 21.0.1
• Gradle: 8.5
• JUnit: 5.10.2
• MyBatis: 3.5.14

How to use

This project consists of two projects: front-end (Htmx) and back-end (Spring Boot).

The database uses an in-memory database, so there is no need to build an environment.

project_root
├── frontend (Htmx)
└── backend (Spring boot)

Run front-end

$ cd frontend
$ npm ci
$ npm run start:fe

Run back-end

Linux / Mac

$ cd frontend
$ npm run build:be:linux
$ npm run start:be

Windows

$ cd frontend
$ npm run build:be:windows
$ npm run start:be

Access the following URL after starting the front-end and back-end.

http://localhost:3000/src/

Run test

Run E2E test

$ cd frontend
$ npm run start:fe
$ npm run start:be
$ npm run test:fe

Run back-end unit test

Linux / Mac

$ cd frontend
$ npm run test:be:linux

Windows

$ cd frontend
$ npm run test:be:windows

Swagger

API definitions are created using Swagger.

To see the API definition, access the following URL after starting the back-end.

http://localhost:8080/swagger-ui/index.html