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 are absolutely zero XML configuration required to get a Spring web application up and running which was the case in Spring MVC framework.

Traditionally, Spring MVC framework used JSP (Java Server Pages) as default view engine which was later replaced with Thymeleaf in Spring Boot 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 very good template engine which offers more benefits than JSP but it requires an application restart to see the latest Thymeleaf files modifications. But if you are working on the frontend of the application, it can be frustrating to restart the application just to see HTML or CSS changes. There are multiple options available 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

Sring 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 restarts the Spring container whenever there are any changes to the source code files.
  • Auto reloads the changes to view templates or static resources. No restart required, just browser refresh is enough.

To include spring-boot-devtools module dependency to 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 Build project automatically checkbox.
  • Press SHIFT + CTRL + A (Window/Linux) or Command + CTRL + A (Mac) to open a pop-up windows. Type registry to open the window. Find and check compiler.automake.allow.when.app.running option and that’s it.

Method 2: Change Thymeleaf Templates Path

When a Spring Boot application is running in Intellij IDEA, the templates are served from out/production/resources/templates directory. You can change this behavior and serve the templates directly from src/main/resources/templates directory in development mode. Create a file application-dev.yml in src/main/resources directory and paste the following code snippet in 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

In order to load 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 nice build automation tool to automate a number of tasks that can be performed independent 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 already, you can get them by downloading the package installer from Node’s website. After Node and npm are installed, you can install the Gulp CLI by using the following command:

$ npm install gulp-cli -g

The -g flag in 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 package.json file in the application root directory to manage all the dependencies we require (along with the version number). Create package.json file in your project root directory and paste the following code snippet in 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 application root directory. Now, let’s start creating Gulp task that watches Thymeleaf templates and static resources changes and copies the files to out/production/resources directory. It is way easier and faster than 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 watching file changes in src/main/resources/ directory while you are editing Thymeleaf templates or resources files, and will copy them into output directory. This is just a simple example 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 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.


Need help to start a new Spring Boot or MEAN stack project? I am available for contract work. Hire me to accomplish your business goals with engineering and design. Let’s talk about your project: hi@attacomsian.com.