Skip to main content

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:

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.

Node.js version

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.

    Open with VSCode on Windows

    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:

    Terminal

    I use PowerShell for my terminal in above screenshot.

    Or, like this, in VSCode:

    VSCode terminal

  3. Initialise package.json. Type:

    npm init in VSCode

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

    npm install browser-sync

    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:

    Browsersync template

    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:

  7. We then modify our package.json.

    From this initial setup:

    To this:

  8. The base setup is complete. ☑️

    We can run it using:

    Run Browsersync

  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:

    CSS

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

    JS

    JS (public/js/index.js):

    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:

    Run final example template

    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 — combined with 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:

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

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

✒️ Edit
Labels:

Comments

Post a Comment

Monkey Raptor uses cookies or biscuits 🍪 for analytics, functionality, and advertisements. More info in Privacy Policy