Last updated: 2025-02-18
Frontend settings - backgrounds
If needed, a frontend stack can be selected in the Project settings of the General tab. After selection, the option "Add frontend controller" is available at the entities to add CRUD functionalities for the respective tables.
Available options for the frontend
In the Professional plan, custom frontend controllers can also be created. They define future pages and forms of the application without the underlying functionality. If the input type GET is selected at an endpoint, the controller method and an empty template are created. If a Data Object is selected as input type, a form is created for the fields of this object, which is validated when submitted. The new Spring @Controller or Angular/React component can later be connected to the proper service.
All the steps for further development are also briefly described in the README.md of the generated application.
Thymeleaf
With the selection of one of the Thymeleaf options required dependency are added to your build. Moreover a layout (layout.html), an error page (error.html) as well as a template for the HomeController (home/index.html) are provided.
The LocalDevConfig is added providing a FileTemplateResolver which becomes active if the profile "local" was specified at application startup. With this the Thymeleaf templates are read directly from the file system and all changes are immediately visible in the browser during development. Otherwise they would have to be compiled first to be in the classpath - more information is in this article
Htmx can be included into a Thymeleaf frontend as well. With this option the required setup is provided and hx-boost="true" is added to the body tag - this way all links and forms are handled without page reloads directly in the browser. A HtmxErrorController is added to the code base as well, so all server errors happening during htmx requests are returned as HTML with a http status 200. This way, they are directly visible in the browser and no further client JavaScript is required.
An option for TypeScript is available if you have selected a Thymeleaf frontend with webpack. With this your custom frontend logic is provided within ts/app.ts instead of js/app.js, coming together with the required configuration like tsconfig.json.
Webpack integration
With the option Thymeleaf + Bootstrap bootstrap.min.css as well as bootstrap.bundle.min.js are directly loaded from the included WebJars in the layout.html. With Thymeleaf + Bootstrap + Webpack or Thymeleaf + Tailwind CSS + Webpack, on the other hand, Bootstrap / Tailwind CSS is integrated using Webpack.
That latest LTS version of Node.js must be available on the system first (see installation). After this npm install can be executed once in the root folder of the app - so all packages defined in packages.json are installed. Using npm run devserver the DevServer can now be started. Its usage is recommended for the further development of the app. The DevServer provides a proxy so that it automatically forwards all requests to the started Spring Boot app - so after starting both the application can be accessed under localhost:8081 via the proxy.
With npm run build the final, minimized CSS/JS files can be generated. This step is integrated directly into the build process of the Spring Boot application via gradle-node-plugin or frontend-maven-plugin and usually does not need to be executed explicitly. The plugins will download and install Node.js by themselves - backgrounds are available here or here.
The option Thymeleaf + Tailwind CSS + Webpack prepares the templates and webpack config for the use of Tailwind CSS. In its latest version 4 the plugin @tailwindcss/postcss is used for this setup.
Angular
By selecting one of the respective options, Angular is integrated into the Spring application as an SPA. The client code is based on the recommendations for the current Angular version 19.1.7 and is mainly located in src/main/webapp. The AngularForwardController ensures that the Angular index.html is returned for browser requests when the application is running - in this way, the actual page is obtained via the Angular Router. The class AngularLocalConfig adds a CORS exception for requests from the browser during development.
During development Node.js must be available on the system (see installation). The application is initialized once with npm install. The development server can then be started with ng serve so that all changes can be tracked directly under localhost:4200. As the client needs to resolve all URLs entered into the browser, there is no proxy involved.
The final, minified JavaScript is built with ng build. This step again is integrated into the build process of the Spring Boot application using gradle-node-plugin or frontend-maven-plugin.
React
React can also be selected to generate a Spring application with an SPA. As the create-react-app and the react-scripts are deprecated, the code includes a fully configured webpack as well as required libraries.
As with Angular, there is a ReactForwardController that returns the index.html for most incoming requests. With this, the react-router library in the frontend can determine the correct page to render. With the ReactLocalConfig a CORS exception is added during development so that the API calls of our client are not blocked by the browser.
Node in the current LTS version must be available on the system. After the libraries have been installed with npm install, the DevServer can be started with npm run devserver. For client tests, jest is preconfigured together with react-testing-library, which can be executed with npm run test. Once again, the final JavaScript files are built and integrated with the corresponding plugin during the build process.
Start Project
No registration required
Further readings
Thymeleaf documentation
Learn Angular
Learn React
Bootstrap
Tailwind CSS
Htmx
