Last updated: 2024-04-18
Best Practices for Angular and Spring Boot
Angular is a first-class framework for creating complex browser applications. Spring Boot's popularity is unbroken and can provide all the necessary services for the backend. What best practices can we follow when using these two frameworks together?
#1 Consistent folder structure
Both frameworks already come with their own best practices and standards, which should be followed as closely as possible. Only with a significant advantage an adaptation is justified - as it is the case here with the folder structure.
When we create a new Angular application with the CLI, the client code is normally directly under the root folder under /src. We should rename this folder to /src/main/webapp so that the entire code of our application follows a consistent structure.
Common folder structure for Angular and Spring Boot
#2 Development server and build process
During frontend development, we use the development server, as it is recommended for Angular. For this additionally we need a CORS config in our Spring application, which only becomes active during development for the local profile. Otherwise our browser would block all API calls.
CORS mapping for the local profile
Our Angular client should be built automatically during the build process of our Spring application and integrated into our fat jar. For this, there is the gradle-node-plugin for Gradle and the frontend-maven-plugin for Maven. When our final jar is then executed, the index.html from Angular should be rendered for all requests so that our frontend can display the relevant content. To do this, we also add an AngularForwardController to our application.
The details about the plugins and the forward can be found here.
#3 InputRowComponent for form elements
Angular offers a flexible way to modularize our browser application with components. We can simplify form handling for our reactive forms with the help of our own InputRowComponent.
Creating a form with the InputRowComponent
Our component contains the recurring logic, such as the fixed HTML structure with its classes. In addition, an empty user input can be automatically converted to null.
Part of the InputRowComponent
We can freely extend our component with additional attributes, which we can then use in any form of our client. We should always take care to remove functions that are no longer required so that the code remains maintainable in the long term.
#4 Localization and error handling
Both Angular and Spring Boot offer their own approaches to localization. Since the vast majority of texts can be found in the frontend, it makes sense for the backend to only return error codes. With this their mappings and all translations can be handled centrally by Angular - as described here.
To centralize error handling in the backend, we can use the Error Handling Spring Boot Starter. This useful library ensures that all exceptions and field validation errors are returned in a standardized structure. In the frontend, we can then provide an ErrorHandler and other utility methods to handle them with a common logic.
Part of the ErrorHandler
#5 Keep your versions up-to-date
The libraries used in the frontend and backend should be regularly upgraded to their latest version. If you let this slide, problems with old versions will be more difficult to fix and the migration efforts will increase.
The migrations include not only the updates to new versions, but also to follow all current recommendations. For Angular 17, for example, this means to use standalone components and the new template syntax. Angular CLI schematics such as ng g @angular/core:standalone can support here with the code updates.
Bootify can be used to create a Spring Boot application with Angular frontend - directly in the browser without registration. All the best practices described are fully applied so that the two frameworks work together perfectly.
Start Project
No registration required
