You too can ace that coding interview
Get my guide for free
April 29, 2020

How to add live reload to a static page

Speed up dev time with live reload on vanilla static sites

If you’re working on a static page with no framework whatsoever, you probably don’t have live reload by default. Learn how to integrate this power to your site in no time.

  1. Create your static folder with the good old basic structure
$ mkdir static
$ cd static
$ touch index.html
$ touch styles.css
$ touch script.js
  1. Write a basic HTML. Live reload won’t work if you don’t have a <head> tag
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Hello Mars</title>
  <meta name="description" content="Hello Mars">
  <meta name="author" content="Carlos Roso">

  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <script src="scripts.js"></script>
</body>
</html>
  1. Install live-server globally.
$ npm i -g live-server
  1. Run live-server in the root of your html file
$ cd static
$ live-server
  1. This will open up the browser. Double check that you have the message Live reload enabled. printed in the console.

That’s it. Now you can save changes and the browser will be automatically reloaded.

Logo

I'm Carlos Roso. I'm a Software Engineer and digital nomad at Toptal. Previously Software Architect at Crossover. In love with open source and design.

More about me
Join the newsletter

I write about remote work, software and personal growth. Subscribe to enjoy my articles every once in a while.