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, 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 application, called movies-ui, will be implemented to consume movies-api.

Proof-of-Concepts & Articles

On 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 serve over HTTPS. movies-api stores its data in H2 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 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 as CSS-styled framework.

Prerequisites

• npm
• Java 25 or higher.

Start applications

• movies-api

  • Open a terminal and, inside the https-springboot-react/movies-api folder, run the command below:

    ./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:

    

  • Click Advanced > Proceed to localhost (unsafe).

    Now, you should see:

    

  • 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 terminal and, inside the https-springboot-react/movies-shell folder, run the command below:

    ./mvnw clean spring-boot:run

  • Sample of the shell interface and execution:

    

• movies-ui

  • Open a new terminal and navigate to the 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:

    

  • Click Advanced > Proceed to localhost (unsafe)

    Now, you should see:

    

    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 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 the https-springboot-react/movies-ui folder.

• Run the following commands:

  npm upgrade
  npm i -g npm-check-updates
  ncu -u
  npm install