Skip to content
Backend Development

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

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

Terminal window
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:

Terminal window
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

Terminal window
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:

Terminal window
npm install concurrently --save-dev

🚀 5. Start the App

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