When developing static HTML pages, the screen is usually the left browser, which opens the page being tested, and VSCode writes the code on the right. If you want to modify the code, save VSCode and manually refresh the page in the browser to see the effect. Switching between browser and VSCode is inefficient and interrupts your thinking.

So, we need a feature that, as soon as you save the HTML/CSS/JavaScript file, the browser will automatically refresh to show the latest effect.

Here they come! Here they come! Here they come!

This feature can be called live update, auto update, hot reload, live Reload, hot Reload. There are many NPM packages that can do this, but I recommend two cool plug-ins:

  • live-server
  • Browser-sync

Both plug-ins are NPM packages, so install node.js first.

live-server

Github.com/tapio/live-…

1. Install the live server. –

npm install -g live-server
Copy the code

The NPM command can be used only after node.js is installed

2. Configure the NPM script

Initialize the NPM configuration at the root of the HTML project

npm init -y
Copy the code

If there is a package.json file in the project root directory, it indicates that the package has been initialized. This step is not required.

Open the package.json file, locate the scripts node, and add the following command:

"scripts": {
    "dev": "live-server"
},
Copy the code

3. Start the live server. –

Run under root:

npm run dev
Copy the code

See serving… It indicates that the server has been started successfully. Open http://127.0.0.1:8080 (it will be opened automatically) to view the home page.

When you edit any file under your project, click “Save” and the page automatically refreshes.

For more configurations, see the Github page description.

Browser-sync

Liverpoolfc.tv: browsersync. IO /

Browser-sync is used in much the same way as live-server.

1. Install the Browser – sync

npm install -g browser-sync
Copy the code

2. Configure the NPM script

"scripts": {
    "dev": "browser-sync start --server --files \"**/**.*\""
},
Copy the code

The configuration is slightly different, but the key is that files is followed by the files to be monitored, which represents all files in the monitored project directory.

3. Start the live server. –

npm run dev
Copy the code

Again, the home page opens when it starts, but it listens on port 3000.

Browser-sync is very powerful and can also be used for dynamic web development, specifically viewing official documents.

Listening to the principle of

Using the live-server principle, browser-sync is similar

A Live-server is a Node application that serves as a small server for all files under a project. When the live-Server runs, it automatically inserts a small piece of JavaScript code into the HTML page by passing the HTML file it requests. This code is used to establish a socket link with the Live-server. The BROWSER’s HTML page can communicate with the live-server. At the same time, the live-server will detect file changes under the project. When a file is saved, the live-server notifies the HTML page through the socket, reloads the HTML page, and refreshes the HTML page. In particular, if the CSS file changes, live-Server does not refresh the entire page, but simply reloads the CSS.

Live-server VSCode plug-in version

In addition, if you use VSCode as your IDE, you can install the live server plug-in to make it easier to use.

Open VSCode’s plugins panel and search for live server (note: the middle is a space, not a bar).

After installation, pay attention to the lower right corner, there is a button Go Live, click it will start! You can have fun now.

In fact, you can also start Live Server by right clicking on the HTML page and popping up the menu “Open with Live Server”