Last updated: 2024-03-21
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 component can later be connected to the proper service.
Thymeleaf options
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 included WebJars in the layout.html. With the Webpack options, on the other hand, Bootstrap / Tailwind CSS is integrated using Webpack.
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 application to install the packages defined in packages.json. 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. For this purpose the file tailwind.config.js is provided as well.
Angular options
By selecting one of the last options, Angular is integrated into the Spring application as an SPA. The client code is based on the recommendations for the current Angular version 17.3.5 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. The class AngularLocalConfig allows an exception for requests from the development server 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.
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.
The steps for further development are also described in the README.md of the generated application.
Start Project
No registration required
Further readings
Thymeleaf documentation
Learn Angular
Bootstrap
Tailwind CSS
Htmx
