Simple Node.js Dev Server with Auto-Reload for HTML/CSS/JS

Greetings. 😃

Sometimes, all we need is an HTML, a little CSS, and some JS — no React circus, no Vite firehose. But we still want our page to reload when we tweak a pixel.

In here, we will use Browsersync 🏆 Node.js package. And of course, you need to install Node.js first on your system.

For code editor, I use VSCode 🏆.

---

Assuming Node.js is already installed.

To check installed Node.js version on your system, open your terminal (Command Prompt / PowerShell — Windows) then type:

node --version

We can employ nvm to make Node.js installation easier to manage. Available for Windows (nvm-windows) and Linux (default nvm project — for Debian, Arch, Fedora, Slackware, etc. — provided you've got bash, zsh, or any POSIX-compliant shell.)

For macOs, we can install default nvm project — use Homebrew, add env to profile.

In this setup, I use Node.js v22.12.0.

---

Setup

Let's do this on Windows 11 operating system — with Node.js is already installed.

1. Open your file explorer, navigate to a folder where your new project folder will reside.

   Create a new folder. For example, name it as EXAMPLE.

   Let's say the path is D:\PROJECTS\EXAMPLE.

   Navigate to EXAMPLE folder in your file explorer ➡️ right click ➡️ Show more options 🤷 ➡️ Open with Code.

   

   By using this method, we will directly use VSCode for EXAMPLE folder.

   Now in VSCode, open the bottom panel and go to TERMINAL menu.

   We can use CTRL + ` (backtick) to open that bottom panel.

2. The terminal path would look like this:

   

   I use PowerShell for my terminal in above screenshot.

   Or, like this, in VSCode:

   

3. Initialise package.json. Type:

   npm init -y
   

4. We want to scope the Browsersync package in this current folder only, not globally. Thus, we type:

   npm install browser-sync --save-dev
   

   In that EXAMPLE folder, there will be a new node_modules folder and a package-lock.json file.

5. Create a new, blank JS file in that folder. Name it browserSync.js.

   

   Use this initial setup (template) for that blank file:

   const browserSync = require("browser-sync").create(); const config = { server: "public", host: "localhost", port: 4000, files: ["public/**/*.*"] }; browserSync.init(config, function (err, bs) { if (err) { console.error("Browser-Sync Error: ", err); return; } console.log(`Browser-Sync is running at: ${bs.options.get("urls").get("local")}`); }); browserSync.watch(config.files).on("change", browserSync.reload);

   Browsersync currently supports only CommonJS — require method. The library was not originally designed as an ES module.

   ES = ECMAScript, not Espagnol, unfortunately.

   We may do dynamic import if we insist on using import:

   const browserSync = (await import("browser-sync")).default.create();

   Hm.

   🏃‍➡️ ChatGPT 4o barges in:

   Mate, using dynamic import() in CommonJS adds async overhead, requires .default access for CommonJS modules, and can't run at top-level without an async wrapper.

   🫠 I respond:

   Aye. Nifty information, that.

   ChatGPT 4o barges out. Away, I must. Flee! HAHAHA. 🏃‍➡️🚪 Trips over the bloody ethernet cable. A thud is heard. 💥

   You sound, mate?, I say.

   Footnote: No such thing as this plot. I flipped it. It's called bonkerity.

   Titled: Async & Thud: A Node.js Slapstick.

   It looks like this in VSCode:

   

   You may change the port to be other than 4000.

   We will use public folder for our HTML, CSS, and JS.

   A tiddy bit about the config variable in that snippet:

   • server ➡️ Folder to serve as root directory.

   • host ➡️ Hostname to bind the server (usually "localhost" or "0.0.0.0").

   • port ➡️ Port number to serve on.

   • files ➡️ Glob pattern of files to watch and reload when changed.

     A glob is just a fancy developer word for a file pattern — a way to match multiple files or folders using wildcards.

     It's like regex, but it's not. 😂🤦

     Glob = Glob...al pattern matching. Global pattern matching. So when we say "glob pattern", it means global pattern matching pattern.

6. Create public folder in that project. The structure will go like this:

   public/ ├── css/ │ └── index.css ├── js/ │ └── index.js └── index.html

7. We then modify our package.json.

   From this initial setup:

   { "name": "example", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "devDependencies": { "browser-sync": "^3.0.4" } }

   To this:

   { "scripts": { "dev": "node browserSync.js" }, "devDependencies": { "browser-sync": "^3.0.4" } }

8. The base setup is complete. ☑️

   We can run it using:

   npm run dev
   

9. We tweak a bit the HTML, CSS, JS, and page icon (favicon).

   ---

   HTML

   This is a template for the HTML (public/index.html), so it won't look blank:

   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>EXAMPLE</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <h1 class="page-title centred-text"> HELLO!! </h1> <div id="script-triggered" class="centred-text"> <p>Script Triggered Element.</p> </div> <script src="./js/index.js"></script> </body> </html>

   ---

   CSS

   A template for the CSS (public/css/index.css):

   body { background: #333; color: #fff; font-family: monospace; font-size: 1rem; padding: 0; margin: 0; line-height: 1.5; box-sizing: border-box; } .centred-text { text-align: center; } .page-title { font-size: 3rem; }

   ---

   JS

   JS (public/js/index.js):

   function exampleScript() { const element = document.getElementById("script-triggered"); element.innerHTML = `<p>Welcome to auto-reload page.</p><p>Served on ${window.location.href}</p>` } document.addEventListener("DOMContentLoaded", exampleScript);

   ---

   Favicon

   You might want to use your own .ico file for the public/favicon.ico.

   I use this desk lamp icon.

10. Done. ✅

    Final look:

    

    Now, you can tinker around with that template. 😃

    Every time there's a change in HTML / CSS / JS / other file (anything within public folder), it will automatically be synchronised — no need to hit refresh or F5.

    Hit CTRL + C to stop the "watching" process in the VSCode bottom panel TERMINAL. Or simply close VSCode.

    For the JS generated text, the phrasing, it should be "Served at" rather than "Served on". But hey. 😂 We're on a street corner wearing a trench coat. All of us are jammed into one trench coat. On a street corner. What a sight.

---

Additional — Full Stack

We can create and run another development server for backend, connect it to a database instance or other endpoint(s) — surely with different port. I always use nodemon for Node.js development (backend application) — combined with node-livereload (for frontend — monolithic), loggers: morgan, winston, and chalk — chalk package is used to colourise the logs.

This is like, this is how we make a cup of tea. Proceeds with bla-bla-bla. And this is how I wash the dishes and measure the mailman's nasal-feature length. No explanation about those.

---

Folder Structure

The entire folder structure looks like this:

EXAMPLE/ ├── node_modules/ ├── public/ │ ├── css/ │ │ └── index.css │ ├── js/ │ │ └── index.js │ ├── favicon.ico │ └── index.html ├── browserSync.js ├── package.json └── package-lock.json

We can add more folders and files to public folder. 🎻

---

Why This Matters

🤔 This opening:

Sometimes, all we need is an HTML, a little CSS, and some JS... But we still want our page to reload when we tweak a pixel.

To further elaborate, this technique is useful for:

• Quick prototyping.
• Presenting (teaching) clean file structure.
• Sharing and replicating since no need for complex build tools.

---

Nice of you to drop in — don't be a stranger now. Ta-ra, be lucky.