How to reload the browser window when you save a file
A quick and simple approach
I was working on a website in vanilla HTML + JS, and I missed one of the best feature provided by those quick start packages like create-react-app or the Vue CLI: reloading the page when I saved a file in the code editor.
The simplest way I found is to install browser-sync
:
npm install -g browser-sync
then run it in your project folder:
browser-sync start --server --files "."
The above command watches all files in the current folder (and all subfolders) for changes, and launches a web server on port 3000, opening a browser window to connect to the server.
Any time you change a file, the browser will refresh.
Very useful while prototyping!
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025