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.

Create your static folder with the good old basic structure.

mkdir static
cd static
touch index.html
touch styles.css
touch script.js

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>

Install live-server globally.

npm i -g live-server

Run live-server in the root of your HTML file.

cd static
live-server

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 automatically be reloaded.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

You TubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Attributions:

undefined by undefined