Automatically re-render the page when we save the file in the code editor

TLDR: use live-server and we don't have to keep refreshing the webpage but the page would refresh itself when we change our code in the webpage.

I used to use Ruby or Python to spin up a local web server, for example, when rendering a webpage as local HTML file cannot support data fetch, but requires a web server.

And then, we always have to save the file, and go to the web browser, and refresh the page.

But there is a server that can automatically re-renders the webpage. The advantage is that we can stay in the code editor, and save the file, and the browser next to the code editor will re-render the page. If we have a big monitor, we can move the browser at the top left corner of the screen, and the editor at the center of the screen, and see the full page of re-rendered result on the browser.

The server is called live-server. We first have to install node, and then we can do

npm i -g live-server

and then we can just cd to our folder, and invoke

live-server

I usually like to not have any index.html file, so that http://127.0.0.1:8080 gives me a list of files I can choose in the current directory.

The way this is done is that live-server add some JavaScript at the end of our file, so that when we save any file or update any file in the folder, then the page would refresh itself.

Comments

[Mohd Ahmad]

We can use snowpack, which is a lightning-fast frontend built tool that supports JS, TypeScript, JSON, etc, out of the box, and it produces an unbundled build for faster development.

Snowpack supports

• JavaScript (.js, .mjs)
• TypeScript (.ts, .tsx)
• JSON (.json)
• JSX (.jsx, .tsx)
• CSS (.css)
• CSS Modules (.module.css)
• Images & Assets (.svg, .jpg, .png, etc.)
• WASM (.wasm)

Another alternative to snowpack is Vite.