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

#webdev #tutorial

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! :)

Read next

furkangozukara profile image

Compared Effect Of Image Captioning For SDXL Fine-tuning / DreamBooth Training for a Single Person, 10.3 GB VRAM via OneTrainer

Furkan Gözükara -

nikl profile image

12 Security Tips for Golang Apps - validation, sanitization, auth, CSRF attacks, hashing ++

Nik L. -

lamnhan profile image

I've created yet another JavaScript framework

Nhan Lam -

allahisrabb profile image

Resolve “Hash sum mismatch” error when running `sudo apt-get update` in Kali linux 2024.1

Abdussalam Mujeeb-ur-rahman -