Last updated: 2024-03-11
Using Webpack with Spring Boot
Webpack is a powerful tool for frontend development. It allows us to improve the structure of our JavaScript/CSS/SCSS code and to prepare it for production usage. How can we integrate Webpack into our Spring Boot application?
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.
Prepare Node.js
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
In the 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.
In the 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.3 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.
After the 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 devDependencies
area.
Configure Webpack
The central file for managing Webpack is webpack.config.js
.
Webpack configuration for creating bundle.js and bundle.css
The entry
and 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.
In the optimization
and module
sections we define the processing rules. By using Babel we can write modern ES6 JavaScript, which will be transformed for maximum compatibility. We write our styles with SCSS, but it is transformed and minimized to CSS for later delivery.
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 webpack.config.js
.
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. We can start it with npm run devserver
and because of the --open
flag it will directly open http://localhost:8081
in the browser when started. 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.
Please note that with webpack-dev-server
version 5 and above you need to provide an array of proxies, otherwise you'll get an error "options.proxy should be an array"
. With this change the path has moved from the key into the context
attribute and supports multiple paths as an array if required.
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
By using the DevServer, we can include the files like normal static resources. However, during development, the DevServer always delivers the JavaScript along with the CSS, so in this case we don't need to include the styles separately and disable them via th:if
. A model attribute isDevserver
should be present, providing the result of "1".equals(request.getHeader("X-Devserver"))
.
Build integration with Maven or Gradle
In 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 inputs
and 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.
Start Project
No registration required
Further readings
Install Node.js
Frontend Maven Plugin
Gradle Plugin for Node