How to Use Remix with Vite: Setup and Example

To use Remix with Vite, you set up a Remix project and configure Vite as the development and build tool by installing the @remix-run/vite adapter. This lets you enjoy Vite's fast hot module replacement and build speed while running Remix's server and routing features.

Syntax

Using Remix with Vite involves these key parts:

• npm create remix@latest: Creates a new Remix project.
• @remix-run/vite: Remix adapter to use Vite as the build tool.
• vite.config.ts: Vite configuration file to customize build and dev server.
• package.json scripts: Commands to run Remix with Vite.

Each part works together to let Remix handle routing and server logic, while Vite manages fast frontend builds and hot reload.

typescript

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

export default defineConfig({
  plugins: [react(), remix()],
  server: {
    port: 3000
  }
});

Example

This example shows a minimal Remix app configured to use Vite for development and build.

It includes the vite.config.ts file, package.json scripts, and a simple route component.

typescript

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { remix } from '@remix-run/vite';

export default defineConfig({
  plugins: [react(), remix()],
  server: {
    port: 3000
  }
});

// package.json (scripts section)
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "node ./build/index.js"
  }
}

// app/routes/index.tsx
import { Link } from '@remix-run/react';

export default function Index() {
  return (
    <main style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem' }}>
      <h1>Welcome to Remix with Vite!</h1>
      <p>This page is served by Remix and built with Vite.</p>
      <Link to="/about">Go to About</Link>
    </main>
  );
}

Output

<h1>Welcome to Remix with Vite!</h1>
<p>This page is served by Remix and built with Vite.</p>
<a href="/about">Go to About</a>

Common Pitfalls

Common mistakes when using Remix with Vite include:

• Not installing @remix-run/vite adapter, which causes build errors.
• Forgetting to update vite.config.ts to include the Remix plugin.
• Running remix dev instead of vite for development, which bypasses Vite's fast reload.
• Not setting correct server port or proxy settings, causing routing issues.

Always use vite commands for dev and build to leverage Vite fully.

typescript

/* Wrong vite.config.ts missing remix plugin */
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

/* Correct vite.config.ts with remix plugin */
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { remix } from '@remix-run/vite';

export default defineConfig({
  plugins: [react(), remix()]
});

Quick Reference

Summary tips for using Remix with Vite:

• Use @remix-run/vite adapter for integration.
• Run vite commands for development and build.
• Configure vite.config.ts with Remix and React plugins.
• Ensure server port matches Remix expectations (default 3000).
• Check Remix docs for latest Vite support and updates.

Key Takeaways

Install and use the @remix-run/vite adapter to connect Remix with Vite.

Run Vite commands (vite, vite build) instead of remix dev for faster reloads.

Configure vite.config.ts with remix() plugin alongside React plugin.

Ensure server port and proxy settings match Remix routing needs.

Check official Remix docs for updates on Vite integration.