Last updated: 2026-09-19

Frontend settings - backgrounds

The frontend is configured in the Project settings of the General tab. Instead of selecting one combined stack, the setup is split into Frontend, Build tool and CSS framework. This keeps the technology choices explicit and makes it possible to use the same frontend framework with different build setups.

After a frontend has been selected, the option "Add frontend controller" is available at the entities to add CRUD functionality for the respective tables. The Builder keeps dependent settings compatible, and unavailable combinations cannot be selected.

The supported combinations are:

Thymeleaf or jte: WebJars, Vite or Webpack. Bootstrap is available with every build tool; Tailwind CSS requires Vite or Webpack.
React: Vite or Webpack, together with Bootstrap or Tailwind CSS.
Angular: the Angular build setup is used, together with Bootstrap or Tailwind CSS. The separate Build tool setting does not apply.

Vite offers a compact configuration and fast development server. Webpack remains available for established projects and teams that prefer its configuration and plugin ecosystem. WebJars is the simplest server-rendered option and does not require Node.js.

With Bootify Professional, custom frontend controllers can also be created. They define future pages and forms of the application without the underlying functionality and can already be selected in the Security tab. 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

Selecting Thymeleaf adds the required dependencies to the build. Moreover a layout (layout.html), an error page (error.html) and 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.

Jte

Jte is the second option for server-side rendering (SSR). This integrates the corresponding dependency gg.jte:jte as well as the Spring Boot starter.

By setting gg.jte.developmentMode=true for the local profile, all templates are automatically recompiled during development. For projects with the multi-module option, a separate JteModuleViewResolver is provided so that the templates can be found in all modules. In addition, all templates are merged into one folder for the Gradle/Maven build.

If Kotlin is selected as the project language, all templates are also written in Kotlin code with the extension .kte. The project option for htmx is available again.

Build tools for Thymeleaf and jte

WebJars

WebJars loads bootstrap.min.css and bootstrap.bundle.min.js directly from dependencies in the layout.html or layout.jte. Custom JavaScript and CSS remain regular static resources. This setup has no Node.js dependency and is a good choice when Bootstrap and a small amount of custom frontend code are sufficient.

TypeScript and Tailwind CSS are not offered with WebJars because both require a frontend build step.

Vite

Vite handles Bootstrap or Tailwind CSS and custom JavaScript or TypeScript. The generated vite.config.mts writes the production assets into the Spring Boot resources and configures the development server on localhost:8081. Requests for server-rendered pages are proxied to the Spring Boot application on port 8080, and changes to Thymeleaf or jte templates trigger a browser reload.

Use npm run devserver during development and npm run build to create the minimized assets. When TypeScript is enabled, the production command runs tsc --noEmit before the Vite build.

Webpack

Webpack provides the same development and production workflow and remains available as an alternative. Select it when maintaining an existing setup, when the team already has Webpack expertise or when a required integration depends on its plugin ecosystem. The generated webpack.config.js includes the DevServer proxy and processing for the selected CSS framework. A complete manual setup is described in Using Webpack with Spring Boot.

For both Vite and Webpack, the production build is integrated directly into Maven or Gradle through frontend-maven-plugin or gradle-node-plugin. These plugins download the configured Node.js version, install the dependencies and execute npm run build; a separate system-wide Node.js installation is only needed for local frontend development.

Angular

Selecting Angular integrates the Angular application as an SPA. The client code is based on the recommendations for the current Angular version 22.1.3 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.

Angular uses its own Angular CLI build setup, so the separate Build tool option is hidden and ignored. 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 is integrated into the build process of the Spring Boot application using gradle-node-plugin or frontend-maven-plugin.

React

React generates an SPA written in TypeScript and can use Vite or Webpack. Both variants generate the same application structure and use the same React components; only the development and bundling setup differs.

The ReactForwardController returns the index.html for browser routes so that react-router can render the correct page. ReactLocalConfig adds a CORS exception during development. With Vite, client environment variables use the standard VITE_ prefix and are accessed through import.meta.env, for example import.meta.env.VITE_API_PATH.

After the libraries have been installed with npm install, the development server can be started with npm run devserver. npm run build performs the TypeScript check and creates the production assets. Client tests continue to use Jest together with React Testing Library and can be executed with npm run test.

Start Project
No registration required

Create new account

Log in with existing account

Reset your password