- • Quickstart
- • Documentation
- • Documentation DevOps
- • Next Steps
- • Spring Boot
- • Spring Data
- • Spring Data MongoDB
- • Spring Security
- › Frontend
- • Multi-Module
Last updated: 2023-08-24
Using Webpack with Spring Boot
Spoiler: in Bootify's Free plan, Spring Boot applications can be initialized with their custom database schema and frontend stack. This includes Webpack with Bootstrap or Tailwind CSS for the frontend, so you get the whole following configuration including DevServer and build integration exactly matching your individual setup. Start a new project - without registration directly in the browser.
The starting point for working with Webpack is Node.js, which uses npm to manage the external dependencies for the frontend. For this we first need to create the
package.json in the top folder of our Spring Boot project.
Our package.json with Webpack and Bootstrap dependencies
scripts section we can define our own commands that can be executed with
npm run <script-name>. Here we are already preparing to start the DevServer we will use during development, as well as building our JS/CSS files for their usage in the final jar of our Spring Boot app. The background on this follows later on.
dependencies section are the libraries that will be available in the browser in the actually delivered frontend. In our example we include Bootstrap in the current version 5.3.2 and the required Popper. In
devDependencies are the packages that are relevant for development and will not be available in the browser. Especially Webpack is included here as well as other dependencies for processing our JS/CSS files.
package.json is created and Node.js is installed on the system, we can initialize the project once with
npm install. All defined dependencies will be automatically downloaded to the
node_modules folder. New required libraries can be added later on with
npm install <package-name>. The
--save-dev parameter would put them in the
The central file for managing Webpack is
Webpack configuration for creating bundle.js and bundle.css
output sections define the entry and output points for processing our JS/CSS files. Entry point is exclusively the
resources/js/app.js file, but it references other SCSS files and will automatically split them up for the build. With the configuration of the
devtool parameter, source maps are available during development to see our actual written sources in the browser's DevTools.
Setting up DevServer for development
The DevServer is recommended during development to be able to track all changes directly in the browser. Otherwise, the build would have to be run after each change. The DevServer can be configured with the following extension to our
Extension to configure the DevServer
With this setup, the DevServer runs on port 8081 and forwards all requests that it cannot answer itself to our Spring Boot app on port 8080. So during development, we should access our running application via
localhost:8081. By defining
watchFiles the browser will reload automatically after every file change - here the HTML extension also includes our Thymeleaf templates. This works best by setting up hot reload for Thymeleaf.
The integration of our JS and CSS scripts is now done with the following extension in the
<head> area of our HTML.
Integrating JS/CSS files
th:if. A model attribute
isDevserver should be present, providing the result of
Build integration with Maven or Gradle
webpack.config.js we have defined that the processed files are written to
target/classes/static. So they will be included in our final jar and can be accessed as a static resource.
For the integration with Maven the
frontend-maven-plugin is required. This runs as an additional step within
mvnw package, downloads Node.js independently and executes
npm install and
npm run build.
Configuration of the frontend-maven-plugin for Webpack
For Gradle, the Node plugin is used, which also executes
npm run build. By configuring
outputs we enable caching and the steps are skipped during
gradlew build if there have been no changes to the source files.
Integration of the frontend build into the Gradle build
With this we have configured Webpack for its usage in our Spring Boot app! The DevServer supports us during development, and with the right plugin the JS/CSS files are prepared and integrated into our fat jar.
Bootify can be used to initialize Spring Boot applications with their own database schema and frontend. Here, Webpack can be chosen with Bootstrap or Tailwind CSS. In the Professional Plan advanced features like multi-module projects and Spring Security are available.
No registration required