React.js and Spring Data REST - CRUD

CRUD application with security enabled: a PoC with ReactJS in the frontend and Spring Data REST in the backend.

Based in the source code here: https://github.com/spring-guides/tut-react-and-spring-data-rest

Guide: https://spring.io/guides/tutorials/react-and-spring-data-rest

The goal is to learn better how to use React, and complete the guide but improving the original code with the following changes and features:

• Make it more appealing, using Bootstrap / HTML5, (reactstrap).
• The original application makes a lot of unnecessary requests to only show the paginated results (2 initial requests + 1 request × number of items in the page), that should be narrowed to just one request.
• Remove the deprecated library rest.js that also does not support standard promises, and replaced by a modern HTTP client: Axios.
• Bookmarkable URLs with React Router.
• Add a REST browser for development purpose: HAL Browser.
• The entity Employee in the original guide is the User entity here, that was merged with the Manager entity.
• Add better client-side validations.
• Add better server-side validations.
• Add better errors handling.
• Add spinners and loading messages when the app is waiting for a response from the API
• Remove Websockets used to update the data in the frontend in "real time", most cases like this is unnecessary and a waste of resources, even using Websockets.
• Split the JS code in different modules to make it more readable (in the original code all the React classes are in just one .js file).
• Add more features, specially to handle users ...
• Optionally use a real database: PostgreSQL 🐘 (check versions).

Requirements

• JDK 17+
• Maven 3+, or you can use the script ./mvnw instead that it will install Maven 3.9 in the user space automatically if the required version isn't there

To build the web assets the project uses Node.js (v18), Webpack, ... but all of them are installed and triggered by Maven automatically in the user space.

Usage

Launch the application with:

$ mvn spring-boot:run

Or use ./mvnw instead of mvn (mvnw.cmd for Window platforms).

Then access the application with http://localhost:8080/, or access to the API with http://localhost:8080/api/

One of the user to access the app with privileged access is frodo@local, and the password admin. Check the initial dataset in the DatabaseLoader.java file.

If you access the API through the HAL browser, it will required to sign-in like with the dash panel using a web page provided by Spring Security, but if you are going to consume the API with a 3rd party tool you will need to authenticate using HTTP Basic Authentication, eg. with curl the Authorization: Basic ... header can be generated using the -u user:pass argument:

$ curl -u gf@local:admin http://localhost:8080/api/users

Hot reloading

To edit Javascript or CSS resources and see the changes in the browser without the need to re-launch the application, execute within a command line:

$ npm run watch

And leave it running (if it doesn't work, try with target/node/npm run watch).

Packaging

Pack the application in a single .jar with all the dependencies and the web server with:

$ mvn package

Then you can run the .jar with:

$ java -jar target/app-0.0.1-SNAPSHOT.jar

Tests

For now only a test that checks that the spring context can be loaded is in the source code. Execute with:

$ mvn test

Versions

For now there are two versions, each one with its own branch:

• master: main version with an in-memory database (H2) to quickly launch the application without the need of a database installed.
• postgres: modified version with PostgreSQL configured, ready for "production" usage.

About

Source code: https://github.com/mrsarm/spring-react-crud

Authors:

• Mariano Ruiz mrsarm@gmail.com

Original Authors:

• Greg Turnquist (Pivotal)
• Pivotal committers and other contributors

2015-2020 | Apache-2.0