Search code examples
springintellij-ideathymeleafliveedit

How to use live edit in a spring boot project in IntelliJ

I am new to web development. I found the live edit feature in IntelliJ really useful. My problem is, I am working on a thymeleaf page for a spring boot project and I can't get live edit to work.

If I create a static web project and create an html file, I can right click on the file and click debug mode, live edit will begin and chrome will start working with IntelliJ. But in a spring project, right clicking won't give me the option to debug the html file. If I open the file in chrome, right click on the page and choose "inspect in IDEA", it will connect with IntelliJ, but every time I make changes to the file, I will have to refresh the browser get the changes.

I did not install any plugins. I downloaded IntelliJ ultimate today and it comes with live edit, I just enabled it.

Is there a way to debug just the html file in a spring project? Or is there any work around?

Solution

  • That's what spring-boot-devtools with LiveReload come to resolve

    Applications that use spring-boot-devtools automatically restart whenever files on the classpath chang more info here

    Start by adding this to your pom file:

    <dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

    or Gradle

    dependencies {
    compile("org.springframework.boot:spring-boot-devtools")
}

    Spring uses Restart technology to make reloading faster. But changes to your resources folder, by default, does not trigger a restart. This is when the folks at Spring thought of including

    an embedded LiveReload server that can be used to trigger a browser refresh when a resource is changed.

    To make fully use of this feature, you need to download an extension from livereload.com that you install in your browser or just google for it (e.g. livereload chrome).

    Enable the extension by clicking: Enable LiveReload

    enable extension

    Now whenever you make any change to your html files, changes automatically are detected and reflected on your browser.