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 theUser
entity here, that was merged with theManager
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).
- 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, Webpack, ... but all of them are installed and triggered by Maven automatically in the user space.
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
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
).
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
For now only a test that checks that the spring context can be loaded is in the source code. Execute with:
$ mvn test
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.
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