DEV Community

Cover image for How to use live-server as a small development server
Raphael MANSUY
Raphael MANSUY

Posted on • Originally published at elitizon.com on

How to use live-server as a small development server

Live-server

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

Live-server is a small development server with live reload capability. Use it for "hacking" your HTML/JavaScript/CSS files, but do not to deploy the final site.

There are two reasons for using this:

AJAX requests don't work with theΒ file://Β protocol due to security restrictions, i.e. you need a server if your site fetches content through JavaScript. Having the page reload automatically after changes to files can accelerate development.

How To

Create a directory ./www

mkdir ./wwww
Enter fullscreen mode Exit fullscreen mode

Edit a simple HTML page such as index.html in the ./www directory

<html>
  <header></header>
  <body>
    <h1>This is a simple test</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Run the command live-server to expose the directory

live-server ./www

Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
aalphaindia profile image
Pawan Pawar

Good post!

Collapse
 
feco2019 profile image
Dimitris Chitas

Clean and fast!

Collapse
 
mxglt profile image
Maxime Guilbert

Thanks! Really cool tool! :)