Spring Boot and React Project
In this post, I will show you some examples that use Spring Boot and React Project for full-stack application. You will see Github links for making following projects:
- Spring Boot + React + Embedded database (H2)
- Spring Boot + React + MySQL
- Spring Boot + React + PostgreSQL
- Spring Boot + React + MongoDB
- Spring Boot + React + Oracle
- Spring Boot + React + Cassandra
- Spring Boot + React + SQL Server (MSSQL)
- Spring Boot + React: JWT Authentication and Authorization
Contents
- Overview
- How to Run
- Spring Boot + React + Embedded database Github
- Spring Boot + React + MySQL Github
- Spring Boot + React + PostgreSQL Github
- Spring Boot + React + MongoDB Github
- Spring Boot + React + Oracle Github
- Spring Boot + React + Cassandra Github
- Spring Boot + React + SQL Server Github
- Spring Boot + React JWT Authentication & Authorization Github
- Run React and Spring Boot on same Port
Overview
The Github source code shows many full stack React + Spring Boot examples with CRUD Operations. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data for interacting with databases. Front-end side is made with React/React Hooks/React Redux, React Router and Bootstrap.
Each of them is the Tutorial CRUD Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
The images below shows screenshots of our System.
– Add Tutorial:
– Retrieve Tutorials:
– Click on Edit button to go to a Tutorial page:
On this Page, you can:
- change status to Published using Publish button
- delete the Tutorial using Delete button
- update the Tutorial details with Update button
– Search Tutorials by title:
How to Run
Spring Boot server:
Open command line at the project root folder, run:
mvn spring-boot:run
The Spring Application will export Rest APIs at port 8080
, CORS configuration for working with port 8081
.
React Client:
Create .env file with content:
PORT=8081
Choose React Github source code as you need.
Open command line at the project root folder, run:
npm install npm start
Or:
yarn install yarn start
Spring Boot + React + Embedded database Github
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + H2: Rest API
Spring Boot + React + MySQL Github
Tutorial:
– Spring Boot + React + MySQL: CRUD example
– Spring Boot + React Redux: CRUD example
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + MySQL: Rest API
– Video:
Spring Boot + React + PostgreSQL Github
Tutorial: Spring Boot + React + PostgreSQL: CRUD example
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + PostgreSQL: Rest API
– Video:
Spring Boot + React + MongoDB Github
Tutorial: Spring Boot + React + MongoDB: CRUD example
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + MongoDB: Rest API
Spring Boot + React + Oracle Github
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + Oracle: Rest API
Spring Boot + React + Cassandra Github
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + Cassandra: Rest API
Spring Boot + React + SQL Server Github
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Spring Boot + SQL Server: Rest API
Spring Boot + React Login Github
– Tutorial: Spring Boot + React: JWT Authentication and Authorization
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend:
– Video:
Using HttpOnly Cookies instead:
– Frontend: React JWT Auth with HttpOnly Cookies
– Backend:
How to run React and Spring Boot on same Port
Assume that we have 2 projects: React & Spring Boot.
If we run them separately:
- Spring Boot Server exports Rest Apis at Url:
http://localhost:8080/
- React Client runs at url:
http://localhost:8081/
Otherwise, when deploying React production-build with Spring Boot project, we only need to run Spring Boot Project for the fullstack (React + Spring Boot) system.
In this example, we access http://localhost:8080/
for the UI.
You can find step by step instruction at How to integrate React.js with Spring Boot.