How to Automatically Reload the Browser Window When Saving a File

Tags: reloading the browser, automatic refresh, browser-sync, web development, vanilla HTML, JavaScript

When working on a website using vanilla HTML and JavaScript, you may sometimes miss the convenience of features provided by quick start packages like create-react-app or the Vue CLI, such as automatically reloading the page when you save a file in the code editor. Luckily, there is a simple solution to achieve this.

The easiest way I found is to install a tool called browser-sync. You can install it globally by running the following command:

npm install -g browser-sync

Once browser-sync is installed, navigate to your project folder and run the following command:

browser-sync start --server --files "."

This command instructs browser-sync to watch all files in the current folder and its subfolders for any changes. It also launches a web server on port 3000 and automatically opens a browser window to connect to the server.

Now, whenever you make changes to any of the files in your project, the browser will automatically refresh, reflecting the latest changes you made. This feature is incredibly useful, especially during the prototyping phase of your web development project.

In summary, by installing and running browser-sync, you can enjoy the convenience of automatic browser window reloading whenever you save a file, even when working with vanilla HTML and JavaScript. Happy coding!