Chapter 10: 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. 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 and Testing 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:

• Why a mock-up is necessary and how to go about it
• Preparing our Spring Boot backend for frontend development
• Creating the React app for the frontend

Technical requirements

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

Node.js also has to be installed, and the code samples 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-and-React/tree/main/Chapter10.

Check out the following video to see the Code in Action: https://bit.ly/3NzdSxs

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 that lists cars from the database and provides paging, sorting, and filtering. There is a button that opens the modal form to add new cars to the database. In each row of the car table, there is a button to delete or edit the car from the database. The frontend contains a link or button to export data from the table to a CSV file.

Let's create a mock-up from our UI. There are lots of different applications for creating mock-ups, or you can even use a pencil and paper. You can also create interactive mock- ups to demonstrate a number of functionalities. If you have done a mock-up, it is much easier to discuss requirements with the client before you start to write any actual code. With the mock-up, it is also easier for the client to understand the idea of the frontend...

Preparing the Spring Boot backend

We are beginning frontend development with the unsecured version of our backend. In the first phase, we will implement all CRUD functionalities and test that these are working correctly. In the second phase, we will enable security in our backend, make the modifications that are required, and finally, implement authentication.

Open the Spring Boot application with Eclipse, which we created in Chapter 5, Securing and Testing 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:

@Override
protected void configure(HttpSecurity http) throws Exception {
    // Add this row
    http.csrf().disable().cors().and()
      .authorizeRequests().anyRequest().permitAll();
    /* Comment this out
&...

Creating the React project for the frontend

Before we start coding the frontend, we have to create a new React app:

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

   npx create-react-app carfront

2. Move to the project folder and install the Material-UI component library by typing the following commands:

   cd carfront
   npm install @mui/material @emotion/react @emotion/styled

3. Run the app by typing the following command in the project's root folder:

   npm start

Alternatively, if you are using yarn, type in the following:

yarn start

4. Open the src folder with Visual Studio Code, remove any superfluous code, and use the MUI AppBar component in the App.js file to get the toolbar for your app. Following the modifications, your App.js file source code should appear as follows:

   import './App.css';
   import AppBar from '@mui/material/AppBar';
   import Toolbar from '@mui/material/Toolbar&apos...

Summary

In this chapter, we started the development of our frontend using the backend that we created in Chapter 5, Securing and Testing 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 are going to use during development.

In the next chapter, we will start to add 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

Packt has other great resources available for learning about React. These are as follows:

• React – The Complete Guide by Academind GmbH: https://www.packtpub.com/product/react-the-complete-guide-includes-hooks-react-router-and-redux-2021-updated-second-edition-video/9781801812603
• React 17 Design Patterns and Best Practices – Third Edition by Carlos Santana Roldán: https://www.packtpub.com/product/react-17-design-patterns-and-best-practices-third-edition/9781800560444