Using LiveReload with Spring boot devtools.

Background Spring boot is a versatile framework to develop web applications. During development time, iteration of code change is a common thing. It is a plus point to see the effect of the code changes as fast as posible. Spring boot devtools enables developer to see the changed output most effectively. Introducing the livereload into the picture, favors the development cycle. Livereload will automatically detect when to reload the browser intelligently. What is LiveReload ? LiveReload is a mechanism, which automatically detects any changes in the source code or any configuration (i.e environment) and then reload the browsers automatically. To facilitate this feature, two part is necessary in the development system: Some script in the browser end, which will listen to any changes and reload the browser. A separate server in spring boot end, to notify the browser whenever code or any configuration has changed or not. The script in the browser end is already developed as browser extension by developers: LiveReload Web Extension - Firefox Addons Store. LiveReload++ - Chrome Web Store. Spring boot devtools ships with live reload server. Look for the log while running a project with spring-boot-devtools included: 2025-03-15T19:39:34.340+06:00 INFO 36364 --- [devtools] [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 Livereload server uses the web socket for communication from spring boot devtools end to browser extension end. Project setup We will start from a scratch spring boot project. Lets head to Spring Initializer and select following dependencies: Spring Web. Thyemeleaf. Spring Boot DevTools. Extract the downloaded zip and open in your editor of choice. I have opened mine into visual studio code. Now add an ExampleController.java containing following, package com.example.devtools; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class ExampleController { @GetMapping(path = "/") public String index(Model model) { return "example"; } } and inside the template folder added example.html. Example Hello world To run the application from VSCode run option, add following run configuration { "version": "0.2.0", "configurations": [ { "type": "java", "name": "Devtools", "request": "launch", "mainClass": "com.example.devtools.DevtoolsApplication", "projectName": "devtools" } ] } Or the project can ran directly from terminal by following: cd {PROJECT_DIRECTORY} ./mvnw spring-boot:run Accessing the http://localhost:8080/ shows following: Experiencing the LiveReload Now run your application from run configuration or as maven goal. Open the browser and enable the LiveReload extension. Now do any change in the html and see the updates into the browser. Look upon changing the html, the spring boot application server does not restarted. But if we change anything in the java end, which requiring the java program to restart, devtools will automatically detect that and restart the server and browser automatically. Inspecting the network tabs web socket section shows each reload triggers and data receive from the liverealod server. Conclusion Specifically saying for monolith applications, reloading the whole server for a design change is very frustrating, because it requires significant time to restart the application server. Using the livereload with devtools can significantly reduce the change-checking time during development.

Mar 15, 2025 - 16:16

Using LiveReload with Spring boot devtools.

Background

Spring boot is a versatile framework to develop web applications. During development time, iteration of code change is a common thing. It is a plus point to see the effect of the code changes as fast as posible. Spring boot devtools enables developer to see the changed output most effectively.

Introducing the livereload into the picture, favors the development cycle. Livereload will automatically detect when to reload the browser intelligently.

What is LiveReload ?

LiveReload is a mechanism, which automatically detects any changes in the source code or any configuration (i.e environment) and then reload the browsers automatically.

To facilitate this feature, two part is necessary in the development system:

Some script in the browser end, which will listen to any changes and reload the browser.
A separate server in spring boot end, to notify the browser whenever code or any configuration has changed or not.

The script in the browser end is already developed as browser extension by developers:

Spring boot devtools ships with live reload server. Look for the log while running a project with spring-boot-devtools included:

2025-03-15T19:39:34.340+06:00  INFO 36364 --- [devtools] [  restartedMain] o.s.b.d.a.OptionalLiveReloadServer       : LiveReload server is running on port 35729

Livereload server uses the web socket for communication from spring boot devtools end to browser extension end.

Project setup

We will start from a scratch spring boot project. Lets head to Spring Initializer and select following dependencies:

Spring Web.
Thyemeleaf.
Spring Boot DevTools.

Extract the downloaded zip and open in your editor of choice. I have opened mine into visual studio code.

Now add an ExampleController.java containing following,

package com.example.devtools;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ExampleController {

    @GetMapping(path = "/")
    public String index(Model model) {
        return "example";
    }
}

and inside the template folder added example.html.


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Example<span class="nt">


    Hello world

To run the application from VSCode run option, add following run configuration

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "java",
            "name": "Devtools",
            "request": "launch",
            "mainClass": "com.example.devtools.DevtoolsApplication",
            "projectName": "devtools"
        }
    ]
}

Or the project can ran directly from terminal by following:

cd {PROJECT_DIRECTORY}
./mvnw spring-boot:run

Accessing the http://localhost:8080/ shows following:

Experiencing the LiveReload

Now run your application from run configuration or as maven goal. Open the browser and enable the LiveReload extension. Now do any change in the html and see the updates into the browser.

Look upon changing the html, the spring boot application server does not restarted.

But if we change anything in the java end, which requiring the java program to restart, devtools will automatically detect that and restart the server and browser automatically.

Inspecting the network tabs web socket section shows each reload triggers and data receive from the liverealod server.

Conclusion

Specifically saying for monolith applications, reloading the whole server for a design change is very frustrating, because it requires significant time to restart the application server.

Using the livereload with devtools can significantly reduce the change-checking time during development.