DEV Community

Silivestir Assey
Silivestir Assey

Posted on

Magic behind express auto frontend library

#devs #express

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');
Enter fullscreen mode Exit fullscreen mode

…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}`)
);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)