sidorares
hrserve
A development server that serves web pages and automatically patches file changes without full page reloads using Playwright.
CLI Usage
node bin/hrserve.js [dir] --url http://localhost:3000Options:
--url: Base URL of the page (default: "https://www.google.com")--devtools, -d: Run with devtools initially open--verbose, -v: Run with verbose logging--width, -w: Width of the browser window--height, -h: Height of the browser window
Programmatic Usage
import { chromium } from "playwright";
import { createServer } from "./lib/hrserve.js";
async function example() {
// Create browser
const browser = await chromium.launch({
headless: false,
devtools: true,
});
// Create server
const server = createServer(browser);
// Listen for patch events
server.on('patch', ({ fileName, mimeType }) => {
console.log(`File patched: ${fileName} (${mimeType})`);
});
// Start serving
await server.serve({
url: "http://your-project-host.com",
dir: "./public",
width: 1200,
height: 800,
devtools: true,
});
}API
createServer(browser)
Creates a new hrserve instance.
Parameters:
browser: A Playwright browser instance
Returns: Server object with the following methods:
server.serve(options)
Starts serving files and watching for changes.
Parameters:
options.url: The base URL to serveoptions.dir: Directory to serve files fromoptions.width: Browser window width (default: 1280)options.height: Browser window height (default: 720)options.devtools: Whether to open devtools (default: false)
server.on(event, handler)
Listen for server events.
Events:
'patch': Emitted when a file is patched. Handler receives{ fileName, mimeType }
Supported File Types
- CSS: Live updates without page reload
- JavaScript: Hot module replacement with script patching
- HTML: Full DOM replacement
- Images: Automatic image reload (PNG, JPG, GIF, SVG, WebP)