Skip to content

README.md

Latest commit

 

History

History
243 lines (164 loc) · 8.08 KB

README.md

File metadata and controls

243 lines (164 loc) · 8.08 KB

https-springboot-react

License: MIT Buy Me A Coffee

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

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:

      your-connection-is-not-private-8443

    • Click Advanced > Proceed to localhost (unsafe).

      Now, you should see:

      movies-api-swagger

    • 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-shell

  • 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:

      your-connection-is-not-private-3443

    • Click Advanced > Proceed to localhost (unsafe)

      Now, you should see:

      movies-ui

      Note: In case movies-ui cannot communicate with movies-api:

    • 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:

Buy Me A Coffee

License

This project is licensed under the MIT License.