LiveReload in Chrome and Firefox with SpringBoot and IntelliJ IDEA

Michael HönnigMichael Hönnig
Working on a web application with SpringBoot and want your changes made in IntelliJ IDEA to be visible in the browser right away? Then this is for you:

Security Hint

Before you install the following plugins to your browser, be aware that these could spy on your browser activity. To mitigate risk, I suggest that you use separate operating system account/profile for critical and non-critical tasks and only install such plugins in the browsers of the non-critical account/profile.

Installing the LiveReview plugin in Firefox

  1. Open the Plugin Settings Page of your Firefox browser.
  2. Type "livereload" in the search field in the top right area.
  3. Select and install the plugin "LiveReload 20.2.1" (*) - see screenshot.
    It's the Web extension based version of LiveReload. Supports Firefox 57 (Firefox Quantum) by Todd Wolfson.
  4. Activate the plugin.
    Now you see an icon which looks like a circle made of two arrows around a small circle in your Firefox toolbar - see screenshot.
  5. To activate the live reload functionality, click the icon to connect.
    It should turn from black to blue when connected, but if not, also hover with your mouse pointer over the icon to see it's status.
Firefox Addons (* At the time of writing this article, I am using Firefox Quantum 58.0.2 64bit on Ubuntu Linux 17.10), if you use a different version or get newer plugin versions, the details might vary.)

Installing the LiveRewiew plugin in Google Chrome

  1. Open the Google Chrome WebStore with your Chrome browser.
  2. Type "lifereload" in the search field on the top left.
  3. Add the plugin "LiveReaload" supplied by livereload.com - see screenshot.
  4. To activate the live reload functionality, click the icon to connect.
    In my Chrome browser it does not turn blue when connected, but one can also hover with the mouse pointer over the icon to see it's status.
Chrome WebStore

Add the spring-boot-devtools Dependency

For Maven, add this dependency to your pom.xml (given the parent-pom is effectively spring-boot-starter-parent with proper version number). 
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime
</dependency>
For Gradle, also given you have a spring-boot-starter configuration, add the dependency like this: 
dependencies {
	compile("org.springframework.boot:spring-boot-devtools")
}
In either case re-import your dependency config into IntelliJ IDEA (if auto-import is not activated anyway).

Enable Auto-Rebuild in IntelliJ IDEA

After you made and changes in your source code, you usually have to run "Build Project" to rebuild your code and restart SpringBoot. But in "File / Settings / Compiler" you can activate "Build project automatically" - see screenshot: IntelliJ IDEA: Build project automatically ⚠ The previous step has to be done for each IntelliJ IDEA project again! Unfortunately, as you can see in the hint of this setting, this does not work while an application is running. We can change this in the IntelliJ IDEA Registry, though. Open the Action popup (Windows and Linux: "Ctrl-Shift-A") and type "Registry" and select the matching entry - see screenshot: IntelliJ IDEA: Registry Then activate "compiler.automake.allow.when.app.running" and press the "close" button. Be careful with the other options in the Registry, though!

See LiveReload at Work

Finally run your SpringBoot Web project and open it in the Browser. Then change something in the source code, be it Java or HTML or anything else. Now the build should automatically run, SpringBoot reload the files and resources of your app and shortly after the browser also reload and reflect the changes. If it does not work, try re-loading IntelliJ IDEA - in some cases this seemed to be necessary. Also one initial manual reload of your app in the browser might be necessary if the config was not yet active when it got initially loaded.

How it Works in SpringBoot

The whole turnaround usually only takes a few seconds - given that the app itself is small enough. How can it be faster than a startup of SpringBoot with your app? SpringBoot applies a nice trick, it has one ClassLoader for external libraries (including SpringBoot, SpringFramework etc.) and one for your apps classes and resources; and it only reloads the second ClassLoader for a live reload.

Acknowledgement

Thanks to John Thompson for his great video course Spring Framework 5: Beginner to Guru, where he explains this live reloading trick. You can also find some of his tutorials on his YouTube channel. To repeatedly apply it, it's just often easier to have it in text form, thus I wrote this summary.