- • Quickstart
- › Documentation
- • Documentation DevOps
- • Next Steps
- • Spring Boot
- • Spring Data
- • Spring Data MongoDB
- • Spring Security
- • Frontend
- • Multi-Module
Last updated: 2023-10-24
Frontend settings - backgrounds
If needed, a frontend stack can be selected in the Project settings of the General tab. With the selection of a stack first the application is prepared. For this Thymeleaf is included as a dependency and a layout (
layout.html), an error page (
error.html) as well as a template for the HomeController (
home/index.html) are provided.
Available options for the frontend
LocalDevConfig is added providing a
FileTemplateResolver which becomes active if the profile "local" was specified at application startup. With this the 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
After selecting a frontend stack in the General tab, the option "Add frontend controller" is available directly at the entities. This option adds CRUD functionalities for the respective tables, so their entries can be edited directly in the browser.
Htmx can be included into the 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
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 controller can later be connected to the proper service.
With the option Thymeleaf + Bootstrap
bootstrap.min.css as well as
bootstrap.bundle.min.js are loaded from included WebJars in the
layout.html. With the Thymeleaf + Bootstrap + Webpack option, on the other hand, Bootstrap 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
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.
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.
No registration required