DEV Community: Silivestir Assey

hello

Silivestir Assey — Sun, 15 Feb 2026 15:04:10 +0000

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

Silivestir Assey ・ Feb 15

#express #javascript #react #server

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

Silivestir Assey — Sun, 15 Feb 2026 15:02:23 +0000

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.

Magic behind express auto frontend library

Silivestir Assey — Mon, 17 Nov 2025 12:02:45 +0000

Hey devs 👋,

I’ve been building full-stack apps for years, and one thing always annoyed me:

Why are we still manually setting up proxies, fixing CORS, remembering build folders, and running two servers… just to connect a frontend and backend?

So I built a solution.

⚡ express-auto-frontend — Zero-Config Frontend + Express Integration

This small library automatically connects any modern frontend (React, Vite, Vue, Angular, Svelte, Nuxt, or even static HTML) to your Express backend — in both development and production.

👉 No proxy configs
👉 No CORS issues
👉 No remembering build paths
👉 No custom scripts
👉 No double-server headaches

Just one line:

include(app, '../frontend');

…and everything works.

🎯 Why I Built It

I kept seeing the same frustrations:

Frontend on 5173, backend on 3001
Vite proxy issues
Random CORS errors
Different dev vs production setups
Confusing deployment steps

I wanted something that just works, with one unified URL during development and a clean production flow.

Now it does.

💡 What It Automatically Handles

✅ Development Mode

Detects your frontend framework
Starts the frontend dev server automatically
Proxies /api/* requests to Express
Sends all other routes to the frontend dev server
Full HMR support
Eliminates CORS completely
One single origin for the entire stack

✅ Production Mode

Detects your dist / build folder
Serves the optimized frontend build
Handles SPA routing (index.html fallback)
Express continues serving your API normally

Zero config. Zero stress.

🧪 Example (Complete App in 20 Seconds)

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

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

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

include(app, '../frontend');

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

That’s literally all you need.

🌐 Supported Frameworks

React (Vite + CRA)
Vue (CLI + Nuxt)
Angular
Svelte / SvelteKit
Static HTML or Pug

📦 NPM

npm i express-auto-frontend

Package: express-auto-frontend
Current version: 1.0.2
Published: 15 hours ago

❤️ Final Words

I built this because full-stack development should feel smooth, not painful.
If you’re tired of manually setting up proxies, fighting CORS, and juggling two servers, give it a try.

If you want to reach out, collaborate, or share feedback, contact me at:
📩 silivestirassey@gmx.com

Happy hacking! ⚡
— Silivestir / splannes