Host Frontend and Backend on a Single Vercel Domain

Frontend
1

Deploying an Express API with a Vite-based React frontend on Vercel results in 404 errors. Try this new configuration:

{"version":2,"builds":[{"src":"api/index.js","use":"@vercel/node"},{"src":"app/package.json","use":"@vercel/static-build","config":{"distDir":"public","buildCommand":"npm run generate"}}],"rewrites":[{"source":"/api/(.*)","destination":"/api/index.js"},{"source":"/(.*)","destination":"/app/public/index.html"}]}

// api/index.js
const express = require('express');
const apiApp = express();
apiApp.get('/api/ping', (req, res) => res.send('pong'));
module.exports = apiApp;

// app/src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const Main = () => <div>React App</div>;
ReactDOM.render(<Main />, document.getElementById('root'));
2

hey, i had similar issues. eventually i found a mispelt endpoint in my api config. clearing vercel cache and checkin every route helped. it’s often little typos causin big headaches.

3

In my experience, achieving a seamless integration between an Express API and a Vite-based React app on Vercel requires careful verification of routing paths and build settings. I encountered an issue where non-matching URLs led to 404 errors that were not evident in local testing. Revisiting the rewrite configurations and ensuring that both the API and the frontend build outputs were correctly referenced helped resolve the problem. Local staging with thorough logging was instrumental in pinpointing mismatches between expected and actual route behavior.

4

hey, i faced similar 404 hickups with subtle cache issues. did yiu ever try adjustin’ the path rewrites? i’m curious if anyone found a simple tweak that did the trick. what hidden glitch helped u? excited to hear your thoughts!

5

hey, interesting config! im wonderin if the order of rewrites might be causin those sporadic 404s sometimes. any chance u tried switching them? what experiance have u had with edge cases in express routing on vercel? curious to learn more from ur experiance.

6

hey, i had a similar issue. eventually, clearng the cache and verifying the rewrite order solved it for me. sometimes a small tweak in the build command helps too. hope this gives u a lead!