Chapter 9. Setting Up the Frontend for Our Spring Boot RESTful Web Service

This chapter explains the steps that are needed to start the development of the frontend part. We will first define the functionalities that we are developing. Then we will do the mock-up of the user interface. As a backend, we will use our Spring Boot application from Chapter 4, Securing and Testing Your Backend. We will start 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 look at the following:

• Why and how to do a mock-up
• 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 4, Securing and Testing Your Backend is needed.

Node.js and create-react-app should be installed.

Mocking up the user interface

In the first few chapters of this book, we created a car database backend that provides the REST API. Now it is time to start building the frontend to our application. We will create a frontend that list 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 the car from the database. Table rows are also editable and modifications can be saved to the database by clicking the Save button in the row. 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 user interface. There are lots of different applications for creating mock-ups, or you could even use a pencil and paper. You can also...

Summary 

In this chapter, we started the development of our frontend, using the backend that we created in Chapter 4, Securing and Testing Your Backend. We defined the functionalities of the frontend and created a mock-up of the user interface. We started frontend development with an unsecured version of the backend, therefore, we 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 user interface?
2. How should you do a mock-up?
3. How should you disable Spring Security from the backend?

Further reading

Packt has other great resources for learning about React:

• https://www.packtpub.com/web-development/getting-started-react
• https://www.packtpub.com/web-development/react-16-essentials-second-edition