Problem:

When you build and deploy a Vite-powered app on Vercel, the Vite development server stops running. This means that any proxy configurations in vite.config.ts for the backend, API requests won’t work in production.

Instead, you’ll need to set up a reverse proxy to route API requests from Vercel to your external API server.

In this guide, I’ll show you how to use Vercel’s rewrites to forward requests to your API.

Prerequisites

• You have a Vite React app deployed to Vercel.
• An external API server (in this example, we’ll use a placeholder URL http://api.example.com).

Step 1: Configure Vite for Development Proxying

To use a proxy for local development, configure your vite.config.ts like this:

// vite.config.tsimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';export default defineConfig(({ mode }) => ({ plugins: [react()], server: { proxy: { '/api': { target: mode === 'production' ? 'http://api.example.com' : 'http://localhost:8843', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), secure: false, }, }, },}));

This configuration proxies /api requests to your external API in development. However, this setup will not work once the app is deployed, as Vercel does not run a Vite server in production.

Step 2: Set Up Rewrites in Vercel

To connect the app to the external API in production, we’ll set up Vercel’s rewrites in vercel.json to forward all /api routes to http://api.example.com.

Create or edit a vercel.json file in the root of your project

{ "rewrites": [ { "source": "/api/:path*", "destination": "http://api.example.com/:path*" }, { "source": "/(.*)", "destination": "/index.html" } ]}

Explanation:

• The first rule matches any route starting with /api/ and redirects it to your API server. It strips the /api prefix, so requests like /api/users will route to http://api.example.com/users.
• The second rule is a catch-all that serves your frontend app’s index.html for any other routes, allowing for client-side routing.

2. Deploy the app on Vercel. The vercel.json configuration will be applied automatically on deployment.

Step 3: Test the Setup

After deploying, try accessing your app’s /api routes to confirm they are correctly proxied to your external API server. For example, if your frontend requests /api/brands, it should now return data from http://api.example.com/brands.

Step 4: Debugging Tips

Use Developer Tools: Check your Network tab in Developer Tools to see where requests are being routed.

Verify Deployment: Ensure that your vercel.json file is committed to your repo and included in your deployment.

BONUS

If you are hosting on Netlify you can create plaintext _redirects file and paste it into dist folder before uploading

/api/* http://api.example.com/:splat 200/* /index.html 200

Conclusion

By setting up rewrite rules in vercel.json, you can seamlessly connect your Vercel-deployed Vite app with any external API server.

Thanks,
Matija