I’m working with Remix and trying to set up a build and deployment process where I only deploy the frontend (client-side part) of my app, using Vite as the bundler for the Remix frontend. My backend is separated, and I don’t want to include the full Remix app in the deployment.

I’m unsure how to proceed with deploying just the frontend part using this setup. The issue is in my vite if I preview it its working fine with proxy.

I ran the following commands, build is running successfully but when I hit APIs it’s giving an HTML page instead as error.

npx remix vite:build
npx sirv-cli build/client/ --single

Here’s my vite.config.ts file, in case that helps with context:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, loadEnv, ConfigEnv } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default ({ mode }: ConfigEnv) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    base: "/",
    plugins: [
      remix({
        ssr: false,
        future: {
          v3_fetcherPersist: true,
          v3_relativeSplatPath: true,
          v3_throwAbortReason: true,
        },
      }),
      tsconfigPaths(),
    ],
    server: {
      proxy: {
        "/api": {
          target: process.env.VITE_API_BASE_URL, // This is our backend URL
          changeOrigin: true,
        },
      },
    },
  });
};