How to Deploy Remix to Vercel: Step-by-Step Guide

To deploy a Remix app to Vercel, install the @remix-run/vercel adapter, update your remix.config.js to use the Vercel platform, and push your code to a Git repository connected to Vercel. Vercel will automatically build and deploy your Remix app with zero configuration.

Syntax

Deploying Remix to Vercel involves these key steps:

• npm install @remix-run/vercel: Adds the Vercel adapter to your project.
• Update remix.config.js to set serverPlatform to vercel.
• Push your code to a Git repo connected to Vercel for automatic deployment.

bash

npm install @remix-run/vercel

// remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverPlatform: 'vercel',
  // other config options
};

Example

This example shows a minimal Remix app configured for Vercel deployment. It installs the adapter, updates config, and includes a simple route.

bash and javascript

npm init remix@latest my-remix-app
cd my-remix-app
npm install @remix-run/vercel

// Update remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverPlatform: 'vercel',
  appDirectory: 'app',
  // other default settings
};

// app/routes/index.jsx
export default function Index() {
  return <h1>Welcome to Remix on Vercel!</h1>;
}

Output

<h1>Welcome to Remix on Vercel!</h1>

Common Pitfalls

Common mistakes when deploying Remix to Vercel include:

• Not installing @remix-run/vercel adapter, causing build errors.
• Forgetting to set serverPlatform: 'vercel' in remix.config.js.
• Not connecting your Git repository to Vercel, so deployment does not trigger.
• Using legacy Remix server adapters incompatible with Vercel.

javascript

/* Wrong: Missing Vercel adapter and config */
// remix.config.js
module.exports = {
  // no serverPlatform set
};

/* Right: Correct Vercel setup */
module.exports = {
  serverPlatform: 'vercel',
};

Quick Reference

Step	Command / Action	Description
1	npm install @remix-run/vercel	Add Vercel adapter to Remix project
2	Update remix.config.js	Set serverPlatform to 'vercel'
3	Push code to Git repo	Connect repo to Vercel for deployment
4	Vercel auto-builds	Vercel builds and deploys your Remix app automatically

Key Takeaways

Install @remix-run/vercel adapter to enable Vercel deployment.

Set serverPlatform: 'vercel' in remix.config.js for correct build.

Connect your Git repository to Vercel for automatic deployment.

Avoid legacy adapters and missing config to prevent build failures.

Vercel handles build and deployment with zero extra setup after config.