Livereload Firefox



Install plugin for your browser: Chrome, Safari, or Firefox. Install brackets-livereload using Brackets extension manager. Enable brackets-livereload with a button in the right-hand side menu bar. Open your project in the browser and enable LiveReload plugin. N things you need to know about LiveReload. LiveReload lives in your menu bar. It works with Safari, Chrome, Firefox and Mobile Safari. Also Opera if you enable web sockets. Yes, you heard that right, LiveReload.

Spring Boot DevTools

N things you need to know about LiveReload. LiveReload lives in your menu bar. It works with Safari, Chrome, Firefox and Mobile Safari. Also Opera if you enable web sockets. Yes, you heard that right, LiveReload.

Spring Boot 1.3 provides another module called Spring Boot DevTools. DevTools stands for Developer Tool. The aim of the module is to try and improve the development time while working with the Spring Boot application. Spring Boot DevTools pick up the changes and restart the application.

We can implement the DevTools in our project by adding the following dependency in the pom.xml file.

Spring Boot DevTools Features

Spring Boot DevTools provides the following features:

  • Property Defaults
  • Automatic Restart
  • LiveReload
  • Remote Debug Tunneling
  • Remote Update and Restart

Property Defaults: Spring Boot provides templating technology Thymeleaf that contains the property spring.thymeleaf.cache. It disables the caching and allows us to update pages without the need of restarting the application. But setting up these properties during the development always creates some problems.

When we use the spring-boot-devtools module, we are not required to set properties. During the development caching for Thymeleaf, Freemarker, Groovy Templates are automatically disabled.

Note: If we do not want to apply property defaults on an application, we can set configprop:spring.devtools.add-properties[] to false in the application.properties file.

Automatic Restart: Auto-restart means reloading of Java classes and configure it at the server-side. After the server-side changes, it deployed dynamically, server restarts happen, and load the modified code. It is mostly used in microservice-based applications. Spring Boot uses two types of ClassLoaders:

  • The classes that do not change (third-Jars) are loaded in the base ClassLoader.
  • The classes that we are actively developing are loaded in the restart ClassLoader.

When the application restarts, the restart ClassLoader is thrown away, and a new one is populated. Therefore, the base ClassLoader is always available and populated.

Livereload Firefox

We can disable the auto-restart of a server by using the property spring.devtools.restart.enabled to false.

Remember:

  • The DevTools always monitors the classpath resources.
  • There is only a way to trigger a restart is to update the classpath.
  • DevTools required a separate application classloader to work properly. By default, Maven fork the application process.
  • Auto-restart works well with LiveReload.
  • DevTools depends on the application context's shutdown hook to close it during the restart.

LiveReload: The Spring Boot DevTools module includes an embedded server called LiveReload. It allows the application to automictically trigger a browser refresh whenever we make changes in the resources. It is also known as auto-refresh.

Note: We can disable the LiveReload by setting the property spring.devtools.livereload.enabled to false.

Guard Livereload Firefox

It provides browser extensions for Chrome, Firefox, and Safari. By default, LiveReload is enabled. The LiveReload works on the following path:

  • /META-INF/maven
  • /META-INF/resources
  • /resources
  • /static
  • /public
  • /templates

We can also disable auto-reload in browser by excluding the above paths. For example:

We can see the other additional path by using the property spring.devtools.restart.additional-paths. For example:

If we want to exclude additional path and want to keep defaults then use the property spring.devtools.restart.additional-exclude. For example:

Remember

  • We can run one LiveReload server at a time.
  • Before starting the application, ensure that no other LiveReload server is running.
  • If we start multiple applications from IDE, it supports only the first LiveReload.

Remote Debug Tunneling: Spring Boot can tunnel JDWP (Java Debug Wire Protocol) over HTTP directly to the application. It can even work application deployment to Internet Cloud providers that only expose port 80 and 443.

Remote Update and Restart: There is another trick that DevTools offers is: it supports remote application updates and restarts. It monitors local classpath for file changes and pushes them to a remote server, which is then restarted. We can also use this feature in combination with LiveReload.

Using a Trigger File

Livereload Firefox

Firefox Livereload Css

Automatic restart sometimes can slow down development time due to frequent restarts. To remove this problem, we can use a trigger file. Spring Boot monitors trigger file and detects modifications in that file. It restarts the server and reloads all previous changes.

We can implement the trigger file in our application by adding the property spring.devtools.restart.trigger-file. The file can be internal or external. For example:

Spring Boot DevTools Example

Step 1: Create a Maven project using Spring Initializr https://start.spring.io/.

Step 2: Provide the Group name and Artifact Id. We have provided Group name com.javatpoint and Artifact Id spring-boot-devtools-example.

Livereload

Step 3: Add the following dependencies: spring-boot-starter-web and spring-boot-devtools.

Step 4: Click on the Generate button. It downloads the Jar file of the project.

Step 5: Extract the Jar file.

Step 6: Import the folder to STS. It takes time to import.

File -> Import -> Existing Maven Projects -> Browse -> Select the folder spring-boot-devtools-example -> Finish

When the project imports successfully, we can see the following directory in the Package Explorer section of the STS.

Step 7: Open the SpringBootDevtoolsExampleApplication.java and run it as Java Application.

After that, make any changes (edit or remove some file or code) in the application, and save that changes. As soon as we save the changes, the server restarts and pick up the changes.


Next TopicSpring Boot Multi-Module Project

Details
Written by Nam Ha Minh
Last Updated on 26 February 2020 | Print Email
In addition to automatic restart on changes feature, the Spring Boot DevTools module also comes with an embedded LiveReload server that can be used to trigger a browser refresh whenever a resource is changed. For example, when you make some changes to a template file, the browser automatically refreshes the page uses that template – you see your changes take effect in action – no need to press F5 again and again – saving you a lot of time.In this post, you will learn to use LiveReload with Spring Boot DevTools to significantly reduce waiting time in developing Spring Boot projects – increase your productivity.Using LiveReload for auto-reload changes is pretty easy. Here are the steps:
  1. Add the dependency spring-boot-devtools to your project’s build file (pom.xml).
  2. Install LiveReload extension for your browser.
  3. Restart your Spring Boot application.
That’s it, and you’re all set. Enjoy better Spring Boot development experience.

1. Install Spring Boot DevTools

So, make sure that you have the following dependency in the Maven’s build file:If you are using Spring Tool Suite IDE, right-click on the project, then click Spring > Add DevTools. Start your Spring Boot application, and you will see LiveReload server is running by default:

2. Install LiveReload extension for your browser


Go to http://livereload.com/extensions/ and click on the link that relates to your browser. Currently, it supports Safari, Chrome and Firefox. For example, I’m using Chrome so I got this:Click Add to Chrome. and click Add extension when asked. Then you will see the LiveReload icon appears to the right of the address bar like this:You can click that icon to enable/disable LiveReload on a specific page in the browser. When the extension connected to LiveReload server, the small circle at the center becomes a filled dot. If not, you will see this error message:

3. What will trigger a browser refresh?

Any changes you made to a resource (Java code, HTML, properties file, etc) in the classpath will trigger a restart plus a browser refresh. In addition, changes to resources in the following directories also trigger a live reload: /META-INF/maven, /META-INF/resources, /resources, /static,

Live Reload Addon Firefox

/public, and /templates.


4. Disable LiveReload server

To disable LiveReload server when your Spring Boot application is running, specify the following property in the application.properties file:

spring.devtools.livereload.enabled=false

Then restart the application.Thanks to Spring Boot DevTools that makes Spring Boot development much more convenient. You can also watch this video to see how to use Spring Boot DevTools in action:

Livereload Firefox Extension

Reference: Using Spring Boot – Developer Tools

Other Spring Boot Tutorials:

Live Reload Firefox Developer Edition


About the Author:

Nam Ha Minh is certified Java programmer (SCJP and SCWCD). He started programming with Java in the time of Java 1.4 and has been falling in love with Java since then. Make friend with him on Facebook and watch his Java videos you YouTube.