인텔리제이에서 Livereload 적용하기

인텔리제이에서 스프링부트 프로젝트를 하면서 화면(View)에 변화를 주면, 자동으로 리빌드하고 브라우저에서 리로드하는 Livereload를 적용하면서 매번 구글링하면서 적용하는것 같아서 아예 내 블로그에도 정리해보았다.

출처 : 호노루 - [Springboot] Developer Tools - Live Reload 설치 삽질기

Livereload를 적용하는 방법은 아래의 4가지 순서대로 정리했다.

  1. DevTools 의존성 주입
  2. 인텔리제이 Registry 활성화
  3. 컴파일러 빌드 자동화 활성화
  4. 크롬에서 LiveReload 설치

1. DevTools 의존성 주입

1
2
3
4
5
6
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>

2. 인텔리제이 Registry 활성화

1
compiler.automake.allow.when.app.running

3. 컴파일러 빌드 자동화 활성화

인텔리제이의 설정에서 [Build] - [Compiler] - [Build project automatically] 활성화

4. 크롬에서 LiveReload 설치

마지막으로 크롬 또는 파이어폭스에서 LiveReload 익스텐션을 설치하고, 활성화하면 마무리된다.

5. application.properties 설정

1
spring.devtools.livereload.enabled=true

프로젝트를 다시 빌드하고, 브라우저에서 LiveReload를 클릭하여 활성화하면, LiveReload가 적용된다.

파이어폭스에서 LiveReload를 실행한 모습

만약 리소스에 변화가 발생했음에도 브라우저에서 반응하지 않으면, 맥(MacOS) 기준으로 인텔리제이에 cmd+F9를 입력하면 반영된다.