Repository files navigation

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

• Backend: Java 21 LTS, Spring Boot 3 (web, security, JPA),Postgres / H2 (or whatever DB is compatible with JPA).
• Frontend: ReactJS, React Router, Bootstrap,Axios, Reactstrap, Node 18 / Npm / Webpack (build).

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

To build the web assets the project usesNode.js,Webpack, ...but all of them are installed and triggered by Maven automaticallyin the user space.

Launch the application with:

$ mvn spring-boot:run

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

Then access the application withhttp://localhost:8080/, or accessto the API withhttp://localhost:8080/api/.

One of the users to access the app with privileged permissions isfrodo@local,and the passwordadmin. Check and edit the initial dataset intheDatabaseLoader.javafile.

If you access the API through the HAL browser, it will require to sign-inlike 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 toolyou will need to authenticate usingHTTP Basic Authentication,eg. withcurl theAuthorization: Basic ... header can be generated usingthe-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 thebrowser without the need to re-launch the application, execute withina command line:

$ npm run watch

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

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

$ mvn package

Add the argument-Dmaven.test.skip if you don't want to run the tests before packaging.

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 contextcan be loaded is in the source code. Execute with:

$ mvn test

AGitHub Action workflow is configured as wellasCI environment, check outmaven.yml.

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

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

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

Authors:

• Mariano Ruiz <mrsarm (at) gmail>

The goal was to learn React and using Spring as backend, so I startedfollowing thisguidefromSpring.io (Greg Turnquist and other authors fromPivotal), but I ended uprewriting almost all from scratch and adding a lot of features, like Bootstrap,client side validations, routing, updating dependencies to major versions ...

2015-2025 | Apache-2.0