I am using Express + Type script for Backend. And vite + React for frontend.
I want to deploy both frontend and backend to deploy in same domain in vercel. to Support cookies
Project Structure
|- server
| |- src/server.ts
| |- package.json
|
|- client
| |- src/
| |- package.json
|
|- vercel.json
vercel.json
{
"version": 2,
"builds": [
{
"src": "server/src/server.ts",
"use": "@vercel/node"
},
{
"src": "client/package.json",
"use": "@vercel/static-build",
"config": {
"distDir": "dist",
"buildCommand": "npm run build"
}
}
],
"rewrites": [
{
"source": "/api/(.*)",
"destination": "server/src/server.ts"
},
{
"source": "/(.*)",
"destination": "client/dist/index.html"
}
]
}
Vercel Deployment Image
- It builds both the frontend and backend perfectly without errors, but the both frontend and backend are not working, i mean can’t accessible. this is url of my deployment: https://single-host.vercel.app. it just shows 404 error.
Console Logs of The Deployment Domain
Build Logs
vite v6.0.3 building for production...
transforming...
✓ 93 modules transformed.
rendering chunks...
computing gzip size...
dist/registerSW.js 0.13 kB
dist/manifest.webmanifest 0.33 kB
dist/index.html 0.78 kB │ gzip: 0.40 kB
dist/assets/index-DOKYIi0D.css 0.88 kB │ gzip: 0.48 kB
dist/assets/index-5Zs-5n5D.js 214.14 kB │ gzip: 72.70 kB
✓ built in 2.67s
PWA v0.21.1
mode generateSW
precache 6 entries (210.88 KiB)
files generated
dist/sw.js
dist/workbox-5ffe50d4.js
Installing dependencies...
up to date in 1s
23 packages are looking for funding
run `npm fund` for details
Using TypeScript 5.7.2 (local user-provided)
Build Completed in /vercel/output [21s]
Deploying outputs...
Deployment completed
Uploading build cache [36.13 MB]...
Build cache uploaded: 607.56ms
I am suspecting that issue with your initial vercel.json configuration is that the rewrite rule for the frontend (/) is pointing directly to client/dist/index.html, which only serves the root page and does not handle other routes.
Instead, you should use /(.*) as the source in the rewrite rule for the frontend, so all paths (not just the root) are correctly routed to the React app’s static files in the client/dist folder.
Here’s the corrected configuration:
{
"version": 2,
"builds": [
{
"src": "server/src/server.ts",
"use": "@vercel/node"
},
{
"src": "client/package.json",
"use": "@vercel/static-build",
"config": {
"distDir": "dist",
"buildCommand": "npm run build"
}
}
],
"rewrites": [
{
"source": "/api/(.*)",
"destination": "server/src/server.ts"
},
{
"source": "/(.*)",
"destination": "client/dist/$1"
}
]
}
This updated configuration ensures that:
API routes (/api/*) are routed to the Express backend.
All other routes (/(.*)) are correctly routed to the React frontend, allowing client-side routing to handle paths like /about, /home, etc.
This should resolve the 404 error and allow both the frontend and backend to function properly on the same domain.