[Node.js] express 에 live reload 적용하기

in Node.js on Nodejs, ETC

express로 개발할때 html, css 가 변경되면 브라우저에 바로바로 반영되게 맹글어 보자.

필요한 package 추가

livereload 패키지와 connect-livereload 패키지 설치

npm i livereload connect-livereload

## 또는
yarn add livereload connect-livereload

적용

import express from 'express';
import livereload from 'livereload';
import livereloadMiddleware from 'connect-livereload';

// 라이브 서버 설정
const liveServer = livereload.createServer({
    // 변경시 다시 로드할 파일 확장자들 설정
    exts: ['html', 'css', 'ejs'],
    debug: true
});

liveServer.watch(__dirname);

...
...

const app = express();

...
...

// 미들웨어 설정
app.use(livereloadMiddleware());

...
...

크롬 확장프로그램 설치

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei