Can't load assets in an app which is served with a rewrite on Vercel

Question

Problem

Assets are not loading (HTTP 404) for the app that is being served with a rewrite.

Explanation

Hi! I'm using turborepo to create a website. I have two different apps (RootApp and a SideProject). Both of them are deployed to Vercel. I've configured the RootApp to be served on a custom domain. I've been following this blog post trying to configure the rewrites.

RootApp is an Astro project and it has a vercel.json with this source:

// vercel.json

{
  "rewrites": [
    {
      "source": "/projects/<SideProjectName>",
      "destination": "<SideProjectProdUrl>"
    }
  ]
}

SideProject is a Vite/React app. I have configured it to have a basePath like this

// vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  base: '/projects/<SideProjectName>/',
  plugins: [react()],
})

RootApp is being served fine, but when I'm navigating to <custom-domain>/projects/<SideProjectName> only the HTML request works. Both asset requests for CSS and JS fail with 404. They request <custom-domain>/projects/<SideProjectName>/assets/...

What do I need to configure for assets to work properly?

Answer 1

To fix the issue I had to add a redirect for the assets.

// vercel.json

{
  "redirects": [
    {
      "source": "/projects/<SideProjectName>/assets/:filePath",
      "destination": "<SideProjectProdUrl>/assets/:filePath",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/projects/<SideProjectName>",
      "destination": "<SideProjectProdUrl>"
    }
  ]
}