Last updated: 2024-04-17
Integrating Spring Boot with Angular
Angular is a powerful, mature library for single page applications. While Angular runs completely in the client, Spring Boot can be used to provide the backend with all its functions. What are the steps to integrate Angular in the current version 17 into our Spring Boot app?
Using Bootify, a Spring Boot application with Angular as the frontend stack can be created directly in the browser - start project here. All the points described below are already implemented and further settings can be selected according to your preferences. In order to understand the following steps, we will start with a simple application from Bootify without a frontend.
In general, we try to follow the recommendations and standards of both frameworks in their current version as closely as possible - but a few adjustments are necessary so that both work together optimally and all development processes are supported.
Angular setup
A new Angular client is created with its CLI (when not using Bootify). Node.js must be available on the system first; then we add the CLI as a global dependency.
We then create our new Anguar project - the subfolder is created automatically. We select SCSS as the language for the styles and server-side rendering is not supported.
We now move the generated client application completely into our Spring project. In addition to the top-level files, the actual client code is located in the src folder. Since this does not fit well with the structure of Java applications, we move this code to src/main/webapp instead. We keep the .gitignore of our Spring application and only add the line /node_modules there.
We can then write the new folder name into our angular.json and also adjust the target folders - for a Maven project this is target/classes/static, whereas for Gradle it is build/resources/main/static.
Adjusting our client configuration
With this, our client should be ready to run again in its new home. We install the dependencies once and then start the development server. Our application should then be available at http://localhost:4200.
Spring Boot integration
Our client application could not yet call the REST API of our backend during development, because our Spring application is reachable there under port 8080 and a CORS error would occur. Therefore, we add a small configuration to our app that only becomes active for the local profile.This way the browser will no longer block our API calls.
Allowing API calls during development
The only thing missing is the setup so that our Angular client is also accessible after the build and deployment. To do this, we first add a special forward: for all requests that do not correspond to a defined exception, Angular's index.html is rendered. The browser client then has the responibility of showing the correct content according to the URL.
To ensure that our Angular client is build and included in the Spring application (the jar), we use the frontend-maven-plugin for Maven or the gradle-node-plugin for Gradle.
Configuration of the frontend-maven-plugin for Angular
Integration of the Angular build step
The quickest way to test our new settings is to use mvnw spring-boot:run or gradlew bootRun. This will completely build our Spring Boot app including the frontend and then start it. Our application should now be accessible under http://localhost:8080!
In the Free plan of Bootify, Spring Boot prototypes can be created with Angular and Bootstrap or Tailwind CSS. CRUD functionality for the tables of your custom database schema can be activated as well. The Professional plan includes advanced options such as Spring Security - start your new project in no time and with a strong foundation.
See Pricing
or read quickstart
