Setting Up the Frontend for Our Spring Boot RESTful Web Service

This chapter explains the steps that are required to start the development of the frontend part of our car database application. We will first define the functionalities that we are developing. Then, we will do a mock-up of the UI. As a backend, we will use our Spring Boot application from Chapter 5, Securing Your Backend. We will begin development using the unsecured version of the backend. Finally, we will create the React app that we will use in our frontend development.

In this chapter, we will cover the following topics:

• Mocking up the UI
• Preparing the Spring Boot backend
• Creating the React project for the frontend

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing Your Backend, is required.

Node.js also has to be installed, and the code available at the following GitHub link will be required to follow along with the examples in this chapter: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter12.

Mocking up the UI

In the first few chapters of this book, we created a car database backend that provides the RESTful API. Now, it is time to start building the frontend for our application.

We will create a frontend with the following specifications:

• It lists cars from the database in a table and provides paging, sorting, and filtering.
• There is a button that opens a modal form to add new cars to the database.
• In each row of the car table, there is a button to edit the car or delete it from the database.
• There is a link or button to export data from the table to a CSV file.

UI mock-ups are often created at the beginning of frontend development to provide customers with a visual representation of what the user interface will look like. Mock-ups are quite often done by designers and then provided to developers. There are lots of different applications for creating mock-ups, such as Figma, Balsamiq, and Adobe XD, or you can even use a pencil...

Preparing the Spring Boot backend

We will begin frontend development in this chapter with the unsecured version of our backend. Then:

• In Chapter 13, Adding CRUD Functionalities, we will implement all the CRUD functionalities.
• In Chapter 14, Styling the Frontend with MUI, we will continue to polish our UI using Material UI components.
• Finally, in Chapter 16, Securing Your Application, we will enable security in our backend, make some modifications that are required, and implement authentication.

In Eclipse, open the Spring Boot application that we created in Chapter 5, Securing Your Backend. Open the SecurityConfig.java file that defines the Spring Security configuration. Temporarily comment out the current configuration and give everyone access to all endpoints. Refer to the following modifications:

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception
  {
    // Add this one
    http.csrf((csrf) -> csrf.disable())...

Creating the React project for the frontend

Before we start coding the frontend, we have to create a new React app. We will use TypeScript in our React frontend:

1. Open PowerShell, or any other suitable terminal. Create a new React app by typing the following command:

   npm create vite@4 
   

   In this book, we are using Vite version 4.4. You can also use the latest version, but then you have to check for changes in the Vite documentation.

2. Name your project carfront, and select the React framework and TypeScript variant:

Figure 12.4: Frontend project

3. Move to the project folder and install dependencies by typing the following commands:

   cd carfront
   npm install
   

4. Install the MUI component library by typing the following command, which installs the Material UI core library and two Emotion libraries. Emotion is a library designed for writing CSS with JavaScript (https://emotion.sh/docs/introduction...

Summary

In this chapter, we started the development of our frontend using the backend that we created in Chapter 5, Securing Your Backend. We defined the functionalities of the frontend and created a mock-up of the UI. We started frontend development with an unsecured version of the backend and, therefore, made some modifications to our Spring Security configuration class. We also created the React app that we will use during development.

In the next chapter, we will add create, read, update, and delete (CRUD) functionalities to our frontend.

Questions

1. Why should you do a mock-up of the UI?
2. How do you disable Spring Security from the backend?

Further reading

There are many other good resources available for learning about UI design and MUI. A few are listed here:

• Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition), by Steve Krug (https://sensible.com/dont-make-me-think/)
• MUI blog – the latest about MUI (https://mui.com/blog/)
• Material UI GitHub repository (https://github.com/mui/material-ui)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e