2

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?

ChiefTwoPencils
  • 13,548
  • 8
  • 49
  • 75
NicF
  • 25
  • 4
  • 1
    As much as I love JB products, editing static resources seems to be inconsistent at best. I've moved to debugging using DevTools in the browser for the most part due to this. – ChiefTwoPencils Jul 04 '18 at 04:28

1 Answers1

2

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.

ISlimani
  • 1,643
  • 14
  • 16
  • This works for me. Still have to press ctrl+s to apply changes but it's easier than pressing refresh on the browser. Plus devtools allow live update even when application is running, I just have to press ctrl+shift+F9 to recompile the page and then refresh the browser. Thanks! – NicF Jul 04 '18 at 08:47