Why i'm not able to deploy my vite app on vercel

Question

Im trying to build a social media app using Vite but the main problem is its not getting deployed anyhow. Im adding my vite.config.js file for better understading. The main problem im facing is the ./ route is getting shown but other routes are undefined.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

any sort of help will really be appreciated

Answer 1

This is a common issue with SPAs which occurs while working with child paths/routes. This is not specific to vercel and even occurs on other platforms as well, Here is something you can try with vercel:

Create a vercel.json file within the root folder of your project. Add this config to the file:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

As mentioned in this doc as well:

"rewrites" specifies the rules for URL rewrites. { "source": "/(.*)", "destination": "/" } tells Vercel that for any URL path that matches /(.*) (essentially any path), redirect the request to the root path (/).