Spring Boot + Angular Project
In this post, I will show you some Project examples that use Spring Boot and Angular for full-stack application. You will see Github links for making following projects:
- Spring Boot + Angular + Embedded database (H2)
- Spring Boot + Angular + MySQL
- Spring Boot + Angular + PostgreSQL
- Spring Boot + Angular + MongoDB
- Spring Boot + Angular + Oracle
- Spring Boot + Angular + Cassandra
- Spring Boot + Angular + SQL Server (MSSQL)
- Spring Boot + Angular: JWT Authentication and Authorization
Contents
- Overview
- How to Run
- Spring Boot + Angular + Embedded database Github
- Spring Boot + Angular + MySQL Github
- Spring Boot + Angular + PostgreSQL Github
- Spring Boot + Angular + MongoDB Github
- Spring Boot + Angular + Oracle Github
- Spring Boot + Angular + Cassandra Github
- Spring Boot + Angular + SQL Server Github
- Spring Boot + Angular JWT Auth Github
- Run Angular and Spring Boot on same Port
Overview
The Github source code shows many full stack Angular + Spring Boot Project examples with CRUD Operations. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data for interacting with databases. Front-end side is made with Angular 8/10/11/12/13/14/15/16, HttpClient, Router and Bootstrap.
Each of them is the Tutorial CRUD Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Add Tutorial:
– Retrieve Tutorials:
– Click on Edit button to go to a Tutorial page:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
– Search Tutorials by title:
How to Run
Spring Boot server:
Open command line at the project root folder, run:
mvn spring-boot:run
The Spring Application will export Rest APIs at port 8080
, CORS configuration for working with port 8081
.
Angular Client:
Choose Angular Github source code as you need (version).
Open command line at the project root folder, run:
npm install ng serve --port 8081
Spring Boot + Angular + Embedded database Github
Tutorials:
- Spring Boot + Angular 13 + H2: CRUD example
- Spring Boot + Angular 14 + H2: CRUD example
- Spring Boot + Angular 15 + H2: CRUD example
- Spring Boot + Angular 16 + H2: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + H2: Rest API
Spring Boot + Angular + MySQL Github
Tutorials:
- Spring Boot + Angular 13 + MySQL: CRUD example
- Spring Boot + Angular 14 + MySQL: CRUD example
- Spring Boot + Angular 15 + MySQL: CRUD example
- Spring Boot + Angular 16 + MySQL: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + MySQL: Rest API
– Video:
Spring Boot + Angular + PostgreSQL Github
Tutorials:
- Spring Boot + Angular 13 + PostgreSQL: CRUD example
- Spring Boot + Angular 14 + PostgreSQL: CRUD example
- Spring Boot + Angular 15 + PostgreSQL: CRUD example
- Spring Boot + Angular 16 + PostgreSQL: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + PostgreSQL: Rest API
– Video:
Spring Boot + Angular + MongoDB Github
Tutorials:
- Spring Boot + Angular 13 + MongoDB: CRUD example
- Spring Boot + Angular 14 + MongoDB: CRUD example
- Spring Boot + Angular 15 + MongoDB: CRUD example
- Spring Boot + Angular 16 + MongoDB: CRUD example
Github Source code:
– Frontend:
– Backend: Spring Boot + MongoDB: Rest API
Spring Boot + Angular + Oracle Github
Github Source code:
– Frontend:
– Backend: Spring Boot + Oracle: Rest API
Spring Boot + Angular + Cassandra Github
Github Source code:
– Frontend:
– Backend: Spring Boot + Cassandra: Rest API
Spring Boot + Angular + SQL Server Github
Github Source code:
– Frontend:
– Backend: Spring Boot + SQL Server: Rest API
Spring Boot + Angular JWT Github
– Tutorials:
- Spring Boot + Angular 13: JWT Authentication and Authorization
- Spring Boot + Angular 14: JWT Authentication and Authorization
- Spring Boot + Angular 15: JWT Authentication and Authorization
- Spring Boot + Angular 16: JWT Authentication and Authorization
Github Source code:
– Frontend:
– Backend:
– Video:
Using HttpOnly Cookies instead:
– Frontend:
- Angular 16 JWT Auth with HttpOnly Cookies
- Angular 15 JWT Auth with HttpOnly Cookies
- Angular 14 JWT Auth with HttpOnly Cookies
- Angular 13 JWT Auth with HttpOnly Cookies
- Angular 12 JWT Auth with HttpOnly Cookies
– Backend:
How to run Angular and Spring Boot on same Port
Assume that we have 2 projects: Angular & Spring Boot.
If we run them separately:
- Spring Boot Server exports Rest Apis at Url:
http://localhost:8080/
- Angular Client runs at url:
http://localhost:8081/
Otherwise, when deploying Angular production-build with Spring Boot project, we only need to run Spring Boot Project for the fullstack (Angular + Spring Boot) system.
In this example, we access http://localhost:8080/
for the UI.
You can find step by step instruction at How to Integrate Angular with Spring Boot Rest API.