6. Tools

1. nodemon Tool

• It watches your server-side files (like app.js) for changes.
• It automatically restarts the Express server when changes are detected.
• This saves you from stopping and restarting the server manually.

❌ What nodemon doesn’t do:

• It does not auto-refresh your browser.
• It’s not like frontend dev tools (e.g., Vite, Webpack Dev Server) which support hot reload or live reload in the browser.

🧪 Example Workflow

1. You edit app.js or your routes
2. nodemon restarts the server automatically
3. ✅ Your new code is now running
4. 🌐 But you still need to refresh your browser to see the updated result

Bonus Tip

If you want live-reloading in the browser, you can combine nodemon with tools like:

• livereload
• browser-sync
• or frontend frameworks (like Vite or Astro) for full dev-server auto-reloading

2. Auto Browser Refresh

You can set up automatic browser refresh alongside nodemon using a tool like livereload or browser-sync with Express.

2.1 🚀 Option 1

Use livereload + connect-livereload (simple setup)

📦 Step 1: Install dependencies

npm install --save-dev livereload connect-livereload

📄 Step 2: Setup LiveReload in app.js

const express = require('express');
const app = express();
const path = require('path');

// Livereload
const livereload = require('livereload');
const connectLivereload = require('connect-livereload');

// 1. Create livereload server
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// 2. Add connect-livereload middleware
app.use(connectLivereload());

// 3. Trigger refresh on change
liveReloadServer.server.once('connection', () => {
  setTimeout(() => {
    liveReloadServer.refresh('/');
  }, 100);
});

// Serve static files
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

📝 Step 3: Make sure your HTML includes this line:

In public/index.html, add just before </body>:

<script src="http://localhost:35729/livereload.js"></script>

✅ Result:

• Any time you change a file in the public/ directory (e.g. HTML/CSS/JS), the browser auto-refreshes.
• nodemon still handles backend restarts.

You can still run your app with:

npx nodemon app.js

It restarts the server when Express code changes, and livereload refreshes the browser for public file changes.

2.2 🧪 Option 2: browser-sync

✅ What you’ll get:

• Browser auto-refresh on file changes (HTML/CSS/JS/backend)
• Multi-device testing (synchronize clicks, scrolls, inputs)
• Runs alongside nodemon

🧩 1. Install Required Packages

npm install browser-sync --save-dev
npm install nodemon --save-dev

🗂 Example Project Structure

project/
├── public/
│   └── index.html
├── app.js
├── bs-config.js
└── package.json

📄 2. Basic Express Server (app.js)

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

app.listen(3001, () => {
  console.log('Express server on http://localhost:3001');
});

⚙️ 3. Create bs-config.js (BrowserSync Config)

module.exports = {
  proxy: "http://localhost:3001",   // Your Express app
  port: 3000,                        // BrowserSync will serve on this
  files: ["public/**/*.*"],         // Watch these files for reload
  open: true,                       // Auto-open browser
  reloadDelay: 500                  // Give time for nodemon to restart
};

🏃 4. Update package.json Scripts

"scripts": {
  "dev": "nodemon app.js",
  "sync": "browser-sync start --config bs-config.js",
  "start": "concurrently \"npm:dev\" \"npm:sync\""
}

Install concurrently if you don’t have it:

npm install concurrently --save-dev

🚀 5. Start the App

npm start

• Express runs on port 3001
• BrowserSync serves on port 3000
• Changes to public/ files auto-refresh the browser
• Backend restarts with nodemon

Tip

This approach Works on All Devices on Same Network. Try http://<your-ip>:3000 on phone, tablet, etc. Everything stays in sync.