Spring Boot and React Project

by · Last modified: June 7, 2022

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

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:

spring-boot-react-project-github-crud-create

– Retrieve Tutorials:

spring-boot-react-project-github-crud-retrieve

– Click on Edit button to go to a Tutorial page:

spring-boot-react-project-github-crud-retrieve-one

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

spring-boot-react-project-github-crud-update

– Search Tutorials by title:

spring-boot-react-project-github-crud-search

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:

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

– Backend: Spring Boot + MySQL: Rest API

– Video:

Spring Boot + React + PostgreSQL Github

Tutorial: Spring Boot + React + PostgreSQL: CRUD example

Github Source code:
– Frontend:

– Backend: Spring Boot + PostgreSQL: Rest API

– Video:

Spring Boot + React + MongoDB Github

Tutorial: Spring Boot + React + MongoDB: CRUD example

Github Source code:
– Frontend:

– Backend: Spring Boot + MongoDB: Rest API

Spring Boot + React + Oracle Github

Github Source code:
– Frontend:

– Backend: Spring Boot + Oracle: Rest API

Spring Boot + React + Cassandra Github

Github Source code:
– Frontend:

– Backend: Spring Boot + Cassandra: Rest API

Spring Boot + React + SQL Server Github

Github Source code:
– Frontend:

– Backend: Spring Boot + SQL Server: Rest API

Spring Boot + React Login Github

– Tutorial: Spring Boot + React: JWT Authentication and Authorization

Github Source code:
– Frontend:

– 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.

Tags:

You may also like...

Tutorials