I'm trying to have live-server auto reload the code once I save my change.
I've installed live-server globally and created a folder test and put 3 files in there
mkdir test
cd test
touch index.html main.js .live-server.json
live-server
Here's the contents of index.html
<script src='main.js'></script>
Here's the contents of main.js
console.log('hi');
and I got 'hi' in my chrome dev console.
When I changed the code, I got
Change detected /Users/ubuntu/dev/test/main.js
However, my chrome dev console didn't yield that change. I have to refresh the page manually. How do I make my change auto loaded?
Firstly update your browser and live-server package!
Try to re-run your live-server without .live-server.json (remove it !) file because as we can read in docs:
If a file ~/.live-server.json exists it will be loaded and used as default options for live-server on the command line. See "Usage from node" for option names.
You need to add to your index.html boilerplate ! Now it should works like a charm! ;-)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
You can also try run live-server with different port like so:
live-server --port=5000