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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
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.
Top comments (0)