Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

live
reload
static
html
community creator

How to add live reload to a static page

Carlos Roso

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

RELATED TAGS

live
reload
static
html
community creator

CONTRIBUTOR

Carlos Roso
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring