Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hantsy/angular-spring-reactive-sample
RESTful API demos with Spring 6 WebFlux, Spring Boot 3, Spring Data Mongo, Spring Security, Spring Session and Angular (upgraded to v16)
https://github.com/hantsy/angular-spring-reactive-sample
angular reactive reactor spring-boot spring-data-mongodb-reactive spring-security spring-session
Last synced: 2 days ago
JSON representation
RESTful API demos with Spring 6 WebFlux, Spring Boot 3, Spring Data Mongo, Spring Security, Spring Session and Angular (upgraded to v16)
- Host: GitHub
- URL: https://github.com/hantsy/angular-spring-reactive-sample
- Owner: hantsy
- License: gpl-3.0
- Created: 2017-12-31T07:48:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-01T22:53:20.000Z (4 months ago)
- Last Synced: 2024-10-10T18:44:08.336Z (3 months ago)
- Topics: angular, reactive, reactor, spring-boot, spring-data-mongodb-reactive, spring-security, spring-session
- Language: TypeScript
- Homepage: https://medium.com/@hantsy/build-a-reactive-application-with-spring-boot-2-0-and-angular-de0ee5837fed
- Size: 903 KB
- Stars: 251
- Watchers: 18
- Forks: 156
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [Angular Spring Reactive Sample](#angular-spring-reactive-sample)
- [Project structure](#project-structure)
- [Build](#build)
- [Server](#server)
- [Client](#client)
- [Contribute](#contribute)
I've also created a series of projects to demo Angular and Spring WebFlux using other protocols:
* [Angular and Websocket sample](https://github.com/hantsy/angular-spring-websocket-sample)
* [Angular and Server Sent Event sample](https://github.com/hantsy/angular-spring-sse-sample)
* [Angular and RSocket sample](https://github.com/hantsy/angular-spring-rsocket-sample)
# Angular Spring Reactive Sample
This application demonstrate building backend RESTful APIs with the newest Reactive stack introduced in Spring 5, and creating the frontend SPA with Angular 5.
**Read the [comprehensive step by step guide](GUIDE.md) to get more details**.
## Project structure
* client - The client application built with Angular CLI.
* server - The backend RESTful APIs.
## Build and Run
Clone the source codes into your local system.
```
git clone https://github.com/hantsy/angular-spring-reactive-sample
```
### Server
The backend is a Spring Boot based application, make sure you have installed the following software:
* Apache Maven
* Oracle JDK 8
* Docker & Docker Compose
There is a *docker-compose.yml* file in the project root folder.
Starts up required MongoDb and Reids service in the background by executing the following command.
```
docker-compose up
```
> NOTE: You can also install a local MongoDb and Redis instead of using Docker.
Then run the application by Spring boot maven plugin directly.
```
mvn spring-boot:run
```
### Client
The **client** application is generated by Angular CLI.
Enter **client** folder, execute the following command to run the frontend UI.
```
npm install
npm run start
```
Open your favorite browser, and navigate to http://localhost:4200.
## CORS
By default, I do not use a CORS config to run the Server side in this sample application.
But if you do not like to use a `proxy.conf.js` in the Angular config, follow the following steps to enable **cors** support in the backend, and connect to the backend directly in the client side.
### Server
Activate the **cors** profile when running the Spring Boot application.
```bash
java -jar target/app.jar --spring.profiles.active=cors
```
### Client
There is a standalone configuration **cors** added in the Angular config to connect to the backend directly.
```bash
npm run start:cors
```
## Contribute
Welcome to contribute this project. If you have some ideas do not hesitate to file an issue or send a PR directly.