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.

Project Overview

flowchart TB
    subgraph users ["Users"]
        HTTP["REST Clients"]
        Browser["Browser"]
    end

    subgraph movies-ui ["movies-ui:3443\n(React)"]
        UI["movies-ui"]
    end

    subgraph movies-api ["movies-api:8443\n(Spring Boot)"]
        RestCtrl["MoviesController"]
        SwaggerUI["Swagger UI"]

        subgraph h2 ["H2"]
            db[("movies")]
        end
    end

    subgraph movies-shell ["movies-shell\n(Spring Boot)"]
        Shell["movies-shell"]
    end

    Browser -->|"HTTPS :3443"| UI
    Browser -->|"HTTPS :8443"| SwaggerUI
    HTTP -->|"HTTPS"| RestCtrl
    UI -->|"HTTPS"| RestCtrl
    Shell -->|"HTTPS"| RestCtrl
    RestCtrl -->|"JDBC"| db
    SwaggerUI --> RestCtrl

Loading

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.

  Endpoints:

     GET /api/movies
     GET /api/movies/{imdbId}
    POST /api/movies -d {"imdbId": "...", "title": "...", "director": "...", "releaseYear": ...}
  DELETE /api/movies/{imdbId}
  

• 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 MUI as UI component library.

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.

Running Tests

• movies-api

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

    ./mvnw clean test

• movies-shell

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

    ./mvnw clean test

• movies-ui

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

    npm test

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

Code Formatting

• Spring Boot modules (movies-api and movies-shell): Code is formatted using Spotless with Google Java Format.

  To check or apply formatting, make sure you are inside the module folder and run the following command:

  • Check formatting:

    ./mvnw spotless:check

  • Auto-fix formatting:

    ./mvnw spotless:apply

• React module (movies-ui): Code is formatted using Prettier with rules aligned to the project's style guide (2-space indentation, single quotes, no trailing semicolons). ESLint conflicts are resolved via eslint-config-prettier. Configuration is defined in .prettierrc (formatting rules) and .editorconfig (editor consistency).

  To check or apply formatting, make sure you are inside the movies-ui folder and run the following commands:

  • Check formatting:

    npm run format:check

  • Auto-fix formatting:

    npm run format

How to optimize PNG screenshots in documentation folder

[Medium] How I Reduce GIF and Screenshot Sizes for My Technical Articles on macOS

Support

If you find this useful, consider buying me a coffee:

License

This project is licensed under the MIT License.