npm lite-server

Client의 View(html, css) 및 Controller(javascript)를 browser를 간단하게 browser를 통해서 확인하려면 어떻게 할까요?

WAS를 설치하고 파일을 복사하고 web browser를 실행시켜서 url로 접속??

이건 정석적이지만, 절차가 너무 번거롭습니다.

혹은 file:// protocol을 이용하는 것도 하나의 방법입니다.

다만, 이 경우에는 localhost의 특수성을 이용할 수 없습니다.

이를테면 registration of worker service, navigator.geolocation 등은 https protocol인 경우 또는 localhost인 경우에만 정상적으로 동작합니다.

이를 어떻게 손쉽게 테스트할 수 있을까 고민하게 됩니다.

그리고 npm에서 그 해결책을 발견했습니다.

npm은 정말 보물창고이네요. :)

이러한 목적에 부합하는 lite-server라는 module이 있습니다.

lite-server? (#)

공식적인 소개 문구는 다음과 같습니다.

"Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found."

웹앱을 브라우저에서 열거나 html 또는 javascript의 변경을 감지하고, socket을 이용하여 css변경을 주입하는 등의 기능을 제공하는 가벼운 노드 서버입니다. 그리고, route를 찾을 수 없는 경우에는 fallback페이지를 출력합니다.

local NPM install

설치: npm install lite-server --save-dev

global installation

설치: npm install -g lite-server

실행: lite-server

command를 실행하는 folder의 ./index.html 파일을 launch합니다.

References

https://www.npmjs.com/package/lite-server