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 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.

   Or simply right click ➡️ Open with Code.

   It was Windows 11 context menu bug back then when this was published — hence the "Show more options". They've fixed it.

   

   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();

   ⬆️ But 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.

   After you paste the template code above, it will look 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.

   Side note for the config variable in the 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 may 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.

⬆️ That is akin to —

This is how we make a cup of tea.

Proceeded with —

[Blah-blah-blah.]

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.

---

Thank you for visiting. See you next time. 👋