Say Goodbye to Dev Headaches — Meet express-auto-frontend

What it Does

express auto fontend library

Auto-detects your frontend framework or static files.

Dev mode:

Runs your frontend dev server automatically.

Proxies API calls (/api/*) to Express.

Proxies frontend requests (/*) to the frontend server.

Hot reload works out of the box.

Production mode:

Serves the static frontend build automatically.

Supports SPA routing (index.html fallback).

/api/* still goes to Express.

Installation
npm install express-auto-frontend

Usage Example
const express = require('express');
const include = require('express-auto-frontend');

const app = express();
const PORT = 3001;

// API route
app.get('/api/message', (req, res) => {
res.json({ message: 'Hello from backend!' });
});

// Include frontend automatically
include(app, '../frontend'); // path to your frontend folder

app.listen(PORT, () => console.log(Server running on http://localhost:${PORT}));

✅ In dev, you get unified URL + automatic proxying.
✅ In prod, Express serves the built frontend with SPA support.

Optional Config
include(app, '../frontend', {
backendPort: 3001, // required for proxying
devPort: 8080, // frontend dev port override
buildDir: 'build', // frontend build folder
devScript: 'start' // npm script for dev
});

Supported Frontends

React (Vite, CRA)

Vue (CLI, Nuxt)

Angular

Svelte / SvelteKit

Static HTML / Pug

Why Use It

No CORS headaches.

Single server URL for dev & prod.

Zero-config proxy setup.

Works across all major frontend frameworks.