Spring Boot is fast becoming a popular choice for building standalone, Spring-based & production-ready web applications, from RESTful APIs to enterprise-scale websites. It offers out-of-the-box features to automatically configure Spring and 3rd-party libraries whenever possible. There is absolutely zero XML configuration required to get a Spring web application up and running, which was the case in the Spring MVC framework.

Traditionally, the Spring MVC framework used JSP (Java Server Pages) as a default view engine which was later replaced with Thymeleaf in Spring Boot's initial release. Thymeleaf is a powerful Java template engine for processing and creating HTML, XML, JavaScript, CSS, and text. It was primarily developed for quick static prototyping around the concept of Natural Templates: templates can be viewed as static files in the browser.

Although it is a good template engine that offers more benefits than JSP, it requires an application restart to see the latest Thymeleaf file modifications. But if you are a front-end developer, it becomes frustrating to restart the application just to see HTML or CSS changes.

There are multiple ways to make sure that any changes to Thymeleaf templates or static resources like JavaScript and CSS files are reloaded. This article shows you how to auto-reload templates and static resources files without restarting the Spring Boot application in Intellij IDE.

Method 1: Spring Boot Dev Tools

Spring Boot includes an extra set of tools like spring-boot-devtools that be included in any application to provide additional development-time features. Spring Boot Dev Tools does the following:

  • Automatically restart the Spring container whenever there are changes to the source code files.
  • Auto reloads the changes to view templates or static resources. No restart is required, and only a browser refresh is enough.

To include the spring-boot-devtools module dependency in your project, include the following in pom.xml (for Maven) or in build.gradle (for Gradle):

pom.xml

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

build.gradle

configurations {
    developmentOnly
    runtimeClasspath {
        extendsFrom developmentOnly
    }
}
dependencies {
    developmentOnly("org.springframework.boot:spring-boot-devtools")
}

In Eclipse and netBeans, just including the above spring-boot-devtools dependency does the magic. But for Intellij IDEA, you need to do the following extra steps to enable auto-reload:

  • Go to File –> Setting –> Build, Execution, Deployment –> Compiler and check the Build project automatically checkbox.
  • Press SHIFT + CTRL + A (Windows/Linux) or Command + CTRL + A (Mac) to open a pop-up window. Type registry to open the window. Find and check compiler.automake.allow.when.app.running option and that's it.

If you are using netBeans keymap in IntelliJ, press CTRL + ATL + SHIFT + / (Windows/Linux) to open the pop-up window.

Method 2: Change Thymeleaf Templates Path

When a Spring Boot application is running in IntelliJ IDEA, the templates are served from the out/production/resources/templates directory.

You can change this behavior and serve the templates directly from the src/main/resources/templates directory. Create a file application-dev.yml in the src/main/resources directory and paste the following code snippet into it:

application-dev.yml

spring:
    # Templates reloading during development
    thymeleaf:
        prefix: file:src/main/resources/templates/
        cache: false

    # Static resources reloading during development
    resources:
      static-locations: file:src/main/resources/static/
      cache-period: 0

To load the above properties, you need to activate and set the default Spring Boot profile to dev. Add the following property to your application.yml file:

spring:
    profiles:
      active: dev

Don't forget to change the profile to prod in production mode. This can be done in a variety of ways.

Method 3: Gulp Watch

This is a different approach than the previous two. Instead of relying on Spring Boot Dev Tools or changing templates' path, let the Gulp handles this for us. Gulp is a build automation tool to automate several tasks that can be performed independently of the application build system.

You need to have Node.js (Node) and npm (Node Package Manager) installed onto your computer before you can install Gulp.

If you do not have Node & npm installed, you can get them by downloading the package installer from Node's website. After Node and npm are installed, the Gulp CLI can be installed using the following command:

$ npm install gulp-cli -g

The -g flag in the above command tells npm to install Gulp globally on your computer, which enables you to use the gulp command anywhere on your system.

NPM uses the package.json file in the application root directory to manage all the dependencies we require (along with the version number). Create a package.json file in your project root directory and paste the following code snippet into it:

package.json

{
  "name": "my website name",
  "scripts": {
    "gulp-watch": "gulp watch"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-watch": "^5.0.1"
  }
}

Then run the following command to download all the dependencies in a directory called node_modules.

$ npm install

Gulp tasks are written in the gulpfile.js file, which should also be placed in the application root directory. Now let's start creating a Gulp task that watches

Thymeleaf templates and static resources changes and copies the files to the out/production/resources directory. It is way easier and faster than the previous two methods. Following is the complete code.

gulpfile.js

var gulp = require('gulp'), 
    watch = require('gulp-watch');

gulp.task('watch', function () {
    return watch('src/main/resources/**/*.*', () => {
            gulp.src('src/main/resources/**')
                //replace with build/resources/main/ for netBeans
                .pipe(gulp.dest('out/production/resources/')); 
    });
});

gulp.task('default', ['watch']);

That's all. We can run this task with gulp, gulp watch or npm run gulp-watch in the command line.

$ gulp
# OR
$ gulp watch
# OR
$ npm run gulp-watch

Gulp will continuously watch file changes in the src/main/resources/ directory while you are editing Thymeleaf templates or resource files and will copy them into the output directory. This is just a simple example of how you can use Gulp to automate your application workflow. You can even use it to build, pack and deploy the complete Spring Boot application with just a single command.

What is the best approach? All these approaches work just fine without any problem. I personally use and recommend Gulp in the Spring Boot project to automate various tasks. In this way, I do not need to rebuild the application every time or change the active profile. You should also give it a try.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.