Build A Restful Web Application With Spring Boot And React JS

Create Full stack Employee Management System web application using Spring Boot, MySQL and React Hooks and Tailwind CSS.

Github Repository: https://github.com/sayanshoaib/Spring-Boot-React-Js-Full-Stack-Web-Application-

Home Page to display all the employees. Also update and delete employee.

Create Employee.

Update employee.

1. Spring Boot (Initializer)

To start off with you can use Spring Initializer to get the Spring Boot project structure for you, and this can be found here

Once you get there in this case i’m using Maven , and that’s my personal preference over Gradle since it gives a nice xml layout for your setup , in terms of installing dependency , plugins etc. its essentially a tool for your project management, just like package.json for those who are familiar with node js.

You also need to add a couple of dependencies which are

• JPA — Data persistence in SQL stores with Java Persistence API
• Spring Dev Tools — Module can be included in any project to provide additional development-time features.
• WEB — Build web, including RESTful, applications using Spring MVC.
• MySQL— Provides Relational database Management System.
• Lombok — Java annotation library which helps reduce boilierplate code

2. Rest API Service

a. models

Create the REST API service for the backend application which will be able to perform basic CRUD (Create, Read, Update ,Delete) functionality.

b. repositories

Create a repositories package with an interface called EmployeeRepository. The interface extends the Jpa repository so that we can have all methods that are provided by the JpaRepository which allows us to query our database.

c. controllers

Now that you got your repository setup, its time to create a controllers package and with a class called EmployeeController. The is where the REST service with Spring begins. The controller will save all end points of our user controller, which will then be consumed by the outside world. All the request features required by our CRUD app are going to seat here i.e GET, POST, PUT and DELETE requests.

e. database

Create Employe management system database and configure it with your spring boot project. Like this:

spring:
  datasource:
    driverClassName: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test
    username:
    password:
  jpa:
    hibernate.ddl-auto: update
    generate-ddl: true
    show-sql: true

Lastly INTEGRATING REACT JS

Now lets jump in to the frontend of things of our fullstack application.

In this section i am assuming you have already installed nodejs in your working environment. If not just quickly install link can be found here

We are not going to use npm create-react-app to create our frontend since we dont want to separately run the react js application with its own proxy port usually port 3000. We want our Spring backend application to be able to serve the front at its default port 8080, that way we get to experience the fullstack of things without having to separately running two instances servers for our front end and backend application.

Now you can prepare the react js project structure by creating these folders in your root folder of your application.