johnblack123/kotlin-spring-boot-2-angular-10-webshop

A Full Stack application built with Kotlin, Spring Boot 2 and Angular 10. You can run this project like a standard Spring Boot and Angular application or using Docker Compose to launch the whole application with one command.

Kotlin, Spring Boot 2 and Angular 10 WebShop

This project aims to present how to create and configure a Kotlin + Spring Boot 2 + Angular 10 Web application.

Table of Contents

• Prerequisites
• Libraries
  • Backend
  • Frontend
• Running the application
  • In Development mode
  • Using Docker
• Application access
• Database access

Prerequisites

• Java JDK 8+
• Docker Desktop
• Node.js

Libraries

Backend

Library name	Description
Kotlin	Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference.
Spring Boot 2	Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can "just run".
Spring Data Repositories	The JPA module of Spring Data contains a custom namespace that allows defining repository beans.
JPA (Hibernate)	Hibernate ORM enables developers to more easily write applications whose data outlives the application process.
Liquibase	Liquibase Community is an open source project that helps millions of developers rapidly manage database schema changes.
Docker Compose	Compose is a tool for defining and running multi-container Docker applications.
Lombok	Project Lombok is a java library that automatically plugs into your editor and build tools, spicing up your java.
Checkstyle	Checkstyle is a development tool to help programmers write Java code that adheres to a coding standard.
FindBugs	FindBugs is a development tool which uses static analysis to look for bugs in Java code.

Frontend

Library name	Description
Angular 10	Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
Angular Material 10	Internationalized and accessible components for everyone. Well tested to ensure performance and reliability.
Angular Flex Layout 10	Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery.

Running the application

In Development mode

On Windows

Backend

## Run PostgreSQL database on Docker
cd webshop-backend/.docker/dependencies
start.sh

## Build backend from base directory using Maven Wrapper
cd ../../..
mvnw.cmd clean install -pl webshop-backend

## Run backend using Maven Wrapper or simply run Application class
mvnw.cmd spring-boot:run -pl webshop-backend

Frontend

## Run Frontend Angular application using npm
cd webshop-frontend
npm i
npm run start

On MacOS / Linux

Backend

## Run PostgreSQL database on Docker
cd webshop-backend/.docker/dependencies
./start.sh

## Build backend from base directory using Maven Wrapper
cd ../../..
./mvnw clean install -pl webshop-backend

## Run backend using Maven Wrapper or simply run Application class
./mvnw spring-boot:run -pl webshop-backend

Frontend

## Run Frontend Angular application using npm
cd webshop-frontend
npm i
npm run start

Using Docker

On Windows

## Run Backend and Frontend using Docker Compose
cd .docker
start.sh

On MacOS / Linux

## Run Backend and Frontend using Docker Compose
cd .docker
./start.sh

Application access

Component	URL
Frontend	http://localhost:4444
Backend	http://localhost:8888
OpenAPI Documentation	http://localhost:8888/api/swagger-ui.html
OpenAPI Spec	http://localhost:8888/api/v3/api-docs

Database access

URL	Username	Password
jdbc:postgresql://localhost:5555/webshop	webshop_user	secret