Support for Remix with Vite

Vercel now supports deploying Remix applications using Vite.

1
import { vitePlugin as remix } from '@remix-run/dev';
2
import { installGlobals } from '@remix-run/node';
3
import { defineConfig } from 'vite';
4
import tsconfigPaths from 'vite-tsconfig-paths';
5
import { vercelPreset } from '@vercel/remix/vite';
6
 
7
installGlobals();
8
 
9
export default defineConfig({
10
  plugins: [
11
    remix({
12
      presets: [vercelPreset()],
13
    }),
14
    tsconfigPaths(),
15
  ],
16
});

We've collaborated with the Remix team to add Server Bundles to Remix. Vercel will now detect Remix projects using Vite and optimize them using our new Vite preset (@vercel/remix/vite).

This preset enables adding additional features for Remix on Vercel such as:

• Streaming SSR: Dynamically stream content with both Node.js and Edge runtimes

• API Routes: Easily build your serverless API with Remix and a route loader

• Advanced Caching: Use powerful cache headers like stale-while-revalidate

• Data Mutations: Run actions inside Vercel Functions

Deploy Remix to Vercel or learn more in the docs.