Step-by-step guide to deploy the Itqan Agency project (Vite React frontend + Express backend) to Vercel. Use when the user asks about deploying or hosting on Vercel.
This guide explains how to deploy this project (Vite React frontend + Express.js backend + MongoDB) to Vercel.
0.0.0.0/0 IP whitelisted (or Vercel's IPs)Vercel runs the backend as serverless functions. The Express server needs to be wrapped in a Vercel-compatible handler.
Create a file at api/index.ts that wraps the Express app for serverless:
import express from "express";
import { registerRoutes } from "../server/routes";
import { createServer } from "http";
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
const httpServer = createServer(app);
registerRoutes(httpServer, app);
export default app;
vercel.jsonCreate vercel.json in the project root:
{
"buildCommand": "vite build",
"outputDirectory": "dist/public",
"framework": "vite",
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api/index.ts" },
{ "source": "/(.*)", "destination": "/index.html" }
],
"functions": {
"api/index.ts": {
"runtime": "@vercel/node@3"
}
}
}
Make sure vite.config.ts outputs to dist/public:
export default defineConfig({
build: {
outDir: "dist/public",
},
// ... rest of config
});
Go to your Vercel project Settings > Environment Variables and add:
| Variable | Value | Environment |
|---|---|---|
MONGODB_URI | mongodb+srv://... | All |
ADMIN_PASSWORD | Your admin password | All |
npm i -g vercel
vercel login
vercel --prod
To avoid creating new connections on every request, cache the connection in server/db.ts:
import mongoose from "mongoose";
let isConnected = false;
export async function connectDB() {
if (isConnected) return;
await mongoose.connect(process.env.MONGODB_URI!, {
serverSelectionTimeoutMS: 5000,
});
isConnected = true;
}
Then call await connectDB() at the top of your API handler before processing requests.
The rewrites rule in vercel.json sends all non-API routes to index.html, which lets wouter handle client-side routing for pages like /portfolio and /admin.
itqan.agency)| Issue | Solution |
|---|---|
| API returns 500 | Check Vercel Function Logs in the dashboard |
| MongoDB connection fails | Verify MONGODB_URI is set in Vercel env vars and Atlas IP whitelist includes 0.0.0.0/0 |
| Pages return 404 | Ensure vercel.json rewrites are correct |
| Build fails | Run npm run build locally first to catch errors |
| Static assets missing | Verify outputDirectory in vercel.json matches Vite's build.outDir |