Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ivangfr/https-springboot-react

The goal of this project is to play with HTTPS and enable it in Spring Boot applications. For it, we will implement a Spring Boot Rest API that will have its endpoints ready to accept and server over HTTPS. Furthermore, a Spring Boot Shell Java application and a Frontend React application will be implemented to consume movies-api.
https://github.com/ivangfr/https-springboot-react

h2 https java javascript keytool pkcs12 react semantic-ui-react spring-boot spring-data-jpa spring-shell springdoc-openapi web

Last synced: 17 days ago
JSON representation

Host: GitHub
URL: https://github.com/ivangfr/https-springboot-react
Owner: ivangfr
Created: 2019-07-06T15:32:15.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2024-06-05T17:26:59.000Z (5 months ago)
Last Synced: 2024-06-05T19:48:40.581Z (5 months ago)
Topics: h2, https, java, javascript, keytool, pkcs12, react, semantic-ui-react, spring-boot, spring-data-jpa, spring-shell, springdoc-openapi, web
Language: Java
Homepage:
Size: 5.34 MB
Stars: 15
Watchers: 1
Forks: 8
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

# https-springboot-react

The goal of this project is to play with [`HTTPS`](https://en.wikipedia.org/wiki/HTTPS) and enable it in [`Spring Boot`](https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/) applications. For it, we will implement a `Spring Boot` REST API, called `movies-api` that will have its endpoints ready to accept and server over `HTTPS`. Furthermore, a `Spring Boot Shell` Java application, called `movies-shell`, and a Frontend [`React`](https://react.dev/) application, called `movies-ui`, will be implemented to consume `movies-api`.

## Proof-of-Concepts & Articles

On [ivangfr.github.io](https://ivangfr.github.io), I have compiled my Proof-of-Concepts (PoCs) and articles. You can easily search for the technology you are interested in by using the filter. Who knows, perhaps I have already implemented a PoC or written an article about what you are looking for.

## Applications

- ### movies-api

`Spring Boot` Web Java application that exposes a REST API to manage movies. Its endpoints are ready to accept and server over `HTTPS`. `movies-api` stores its data in [`H2`](https://www.h2database.com/html/main.html) memory database.

- ### movies-shell

`Spring Boot` Shell Java application that uses `movies-api` to get information about a movie or to even add/delete a movie. All the communication with `movies-api` is over `HTTPS`.

- ### movies-ui

`React` frontend application where users can manage movies. All the communication with `movies-api` is over `HTTPS`. It uses [`Semantic UI React`](https://react.semantic-ui.com/) as CSS-styled framework.

## Prerequisites

- [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- [`Java 17+`](https://www.oracle.com/java/technologies/downloads/#java17)

## Start applications

- **movies-api**

- Open a terminal and, inside `https-springboot-react/movies-api` folder, run the command bellow:
```
./mvnw clean spring-boot:run
```

- Access Swagger website at https://localhost:8443/swagger-ui.html

- Once accessed for the first time, the following page will appear

![your-connection-is-not-private-8443](documentation/your-connection-is-not-private-8443.jpeg)

- Click `Advanced` > `Proceed to localhost (unsafe)`

Now, you should see:

![movies-api-swagger](documentation/movies-api-swagger.jpeg)

- To re-enable the security warning saying `Your connection is not private` for `https://localhost:8443/swagger-ui.html`, click `Not Secure` (in the address bar) > `Re-enable warnings`

- **movies-shell**

- Open a new terminal and navigate to `https-springboot-react/movies-shell` folder

- Run the command below to package the `jar`:
```
./mvnw clean package -DskipTests
```

- Run the following command to start `movies-shell`:
```
./target/movies-shell-0.0.1-SNAPSHOT.jar
```

- Sample of the shell interface and execution

![movies-shell](documentation/movies-shell.jpeg)

- **movies-ui**

- Open a new terminal and navigate to `https-springboot-react/movies-ui` folder;

- Execute the command below if you are running it for the first time:
```
npm install
```

- To start `movies-ui` run:
```
npm start
```

- Access https://localhost:3443

- Once accessed for the first time, the following page will appear:

![your-connection-is-not-private-3443](documentation/your-connection-is-not-private-3443.jpeg)

- Click `Advanced` > `Proceed to localhost (unsafe)`

Now, you shoud see:

![movies-ui](documentation/movies-ui.jpeg)

> **Note:** In case `movies-ui` cannot communicate with `movies-api`
> - Open `movies-api` Swagger website: https://localhost:8443/swagger-ui.html
> - Click `Advanced` > `Proceed to localhost (unsafe)`
> - Reload `movies-ui` page

- To re-enable the security warning saying `Your connection is not private` for `https://localhost:3443`, click `Not Secure` (in the address bar) > `Re-enable warnings`.

## Shutdown

To stop `movies-api`, `movies-ui` and `movies-shell`, go to the terminal where they are running and press `Ctrl+C`

## Create PKCS12 self-signed certificate

- In order to create a [`PKCS12`](https://en.wikipedia.org/wiki/PKCS_12) certificate, run the following command:
```
keytool -genkeypair -alias localhost \
-keyalg RSA -keysize 2048 -storetype PKCS12 \
-keystore keystore.p12 -validity 3650 \
-dname "CN=localhost, OU=MyCompany, O=MyCompany, L=Berlin, ST=Berlin, C=DE"
```

- Set a password. In this project, we will use `secret`:
```
Enter keystore password: secret
Re-enter new password: secret
```

- To list the certificates `keystore.p12` run the command below. The password will be requested:
```
keytool -list -v -keystore keystore.p12
```

## How to upgrade movies-ui dependencies to latest version

- In a terminal, make sure you are inside `https-springboot-react/movies-ui` folder

- Run the following commands:
```
npm upgrade
npm i -g npm-check-updates
ncu -u
npm install
```

## References

- https://www.javadevjournal.com/spring-boot/spring-boot-ssl/
- https://www.baeldung.com/spring-boot-https-self-signed-certificate
- https://www.thomasvitale.com/https-spring-boot-ssl-certificate/
- https://medium.com/@danielgwilson/https-and-create-react-app-3a30ed31c904