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
The 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 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.
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.
Webpack integration
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 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.
Start Project
No registration required
Further readings
Thymeleaf documentation
Bootstrap
Tailwind CSS
Htmx
