Angular Bootstrap Spring

A modern single-page application built with Angular 22 and Bootstrap 5 for the frontend, backed by Spring Boot 4.1 with Spring Security 7 for the API.

Tech Stack

Backend (API)

• Java 25 (LTS)
• Spring Boot 4.1 with Spring Security 7
• Stateless JWT-style token authentication
• HSQLDB in-memory database (for demo purposes)
• JPA/Hibernate 7 for persistence
• JUnit 6 for testing

Frontend (Client)

• Angular 22 with standalone components
• Bootstrap 5.3 for styling
• TypeScript 6.0
• Angular CLI for builds, Vitest for unit tests

Architecture

The application is split into two modules:

• API - Spring Boot REST backend (stateless, token-based auth)
• Client - Angular SPA frontend

Quick Start

Prerequisites

• Java 25 or higher
• Maven 3.9+
• Node.js 26 (client/.nvmrc) (optional - Maven downloads it automatically)

Build Everything

mvn clean package

This builds both the API and client modules.

Run the API

cd api
mvn spring-boot:run

The API will be available at http://localhost:8080/api

Run the Client (Development)

cd client
npm install
npm start

The client dev server runs at http://localhost:4200 with API proxy to http://localhost:8080.

Authentication

The API uses stateless token-based authentication:

1. Login with Basic Auth to /api/auth/login
2. Receive a token in the X-AUTH-TOKEN response header
3. Include the token in subsequent requests via X-AUTH-TOKEN header

Default Credentials

Username	Password
user@tester.com.au	password

API Endpoints

Method	Endpoint	Description	Auth Required
POST	/api/auth/login	Login (Basic Auth)	No
GET	/api/user	Get current user	Yes
GET	/api/customer	List all customers	Yes
GET	/api/customer/{id}	Get customer by ID	Yes
POST	/api/customer	Create customer	Yes
PUT	/api/customer/{id}	Update customer	Yes
DELETE	/api/customer/{id}	Delete customer	Yes

Development

Backend Development

cd api
mvn clean verify        # Run unit tests
mvn clean verify -Pall-tests  # Run unit + integration tests
mvn spring-boot:run     # Run with hot reload

Frontend Development

cd client
npm install             # Install dependencies
npm start               # Dev server with hot reload
npm run build           # Production build
npm run test            # Run unit tests (watch mode)
npm run test:ci         # Run unit tests once

IDE Setup

IntelliJ IDEA is recommended. Import the project as a Maven project.

For the frontend, ensure the Angular Language Service plugin is installed.

Project Structure

angular_bootstrap_spring/
├── api/                          # Spring Boot backend
│   ├── src/main/java/
│   │   └── au/com/example/
│   │       ├── Application.java  # Spring Boot entry point
│   │       ├── spring/           # Security & config
│   │       ├── controller/       # REST controllers
│   │       ├── service/          # Business logic
│   │       ├── repository/       # Data access
│   │       └── entity/           # JPA entities
│   └── src/main/resources/
│       ├── application.properties
│       └── data.sql              # Sample data
├── client/                       # Angular frontend
│   ├── src/app/
│   │   ├── components/           # Angular components
│   │   ├── services/             # HTTP services
│   │   ├── guards/               # Route guards
│   │   └── models/               # TypeScript interfaces
│   └── angular.json
└── pom.xml                       # Parent POM

License

MIT License

Author

Robert Leggett

• Blog

---

Support

If you find this project helpful, consider supporting further development: