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

it_vturbo profile image

The Evolution of Frontend Development: Exploring Different Architectures

Valentin Turbins -

shadiajam profile image

Should We Rethink About IDs? A Deep Dive into "Snowflake IDs"

Shadi AJAM -

leemeganj profile image

Advanced Next.js caching strategies

Megan Lee -

muash10 profile image

Using Stable Diffusion in AWS Bedrock to Generate Images

Muhammed Ashraf -