0
# Vite Integration
1

2
Modern build system integration providing fast development experience, optimized production builds, and comprehensive plugin ecosystem support for Remix applications.
3

4
## Capabilities
5

6
### Remix Vite Plugin
7

8
Main Vite plugin that integrates Remix with Vite's build system, providing development server, HMR, and production builds.
9

10
```typescript { .api }
11
/**
12
 * Main Remix Vite plugin for integrating Remix with Vite
13
 * @param config - Vite plugin configuration options
14
 * @returns Vite plugin instance
15
 */
16
function vitePlugin(config?: Partial<VitePluginConfig>): RemixVitePlugin;
17

18
interface VitePluginConfig {
19
  /** Path to app directory relative to project root */
20
  appDirectory?: string;
21
  /** Path to assets build directory */
22
  assetsBuildDirectory?: string;
23
  /** Build directory for output (defaults to "build") */
24
  buildDirectory?: string;
25
  /** Entry client file path */
26
  entryClientFile?: string;
27
  /** Entry server file path */
28
  entryServerFile?: string;
29
  /** Public path for assets */
30
  publicPath?: string;
31
  /** Route definition function */
32
  routes?: AppConfig["routes"];
33
  /** Enable/disable server-side rendering */
34
  ssr?: boolean;
35
  /** Server build output file (defaults to "index.js") */
36
  serverBuildFile?: string;
37
  /** Patterns for ignored route files */
38
  ignoredRouteFiles?: string[];
39
  /** Future feature flags */
40
  future?: Partial<FutureConfig>;
41
  /** Base name for routing (defaults to "/") */
42
  basename?: string;
43
  /** Callback called when build ends */
44
  buildEnd?: (args: { viteConfig: ResolvedViteConfig }) => void | Promise<void>;
45
  /** Whether to write manifest.json file to build directory */
46
  manifest?: boolean;
47
  /** Vite presets for platform integration */
48
  presets?: Preset[];
49
  /** Server bundles configuration function */
50
  serverBundles?: ServerBundlesFunction;
51
}
52

53
type RemixVitePlugin = (config?: Partial<VitePluginConfig>) => Plugin;
54
```
55

56
**Usage Example:**
57

58
```typescript
59
// vite.config.ts
60
import { defineConfig } from "vite";
61
import { vitePlugin } from "@remix-run/dev";
62

63
export default defineConfig({
64
  plugins: [
65
    vitePlugin({
66
      appDirectory: "app",
67
      buildDirectory: "build",
68
      future: {
69
        v3_singleFetch: true,
70
        v3_lazyRouteDiscovery: true,
71
      },
72
    }),
73
  ],
74
});
75
```
76

77
### Cloudflare Development Proxy Plugin
78

79
Vite plugin for proxying Cloudflare-specific functionality during development.
80

81
```typescript { .api }
82
/**
83
 * Cloudflare development proxy plugin for local development
84
 * @param options - Cloudflare proxy configuration
85
 * @returns Vite plugin for Cloudflare development
86
 */
87
function cloudflareDevProxyVitePlugin<Env = {}, Cf extends CfProperties = {}>(
88
  options: CloudflareDevProxyOptions<Env, Cf>
89
): Plugin;
90

91
interface CloudflareDevProxyOptions<Env, Cf> {
92
  /** Cloudflare environment variables */
93
  getLoadContext?: (args: {
94
    request: Request;
95
    context: { env: Env; cf: Cf; ctx: ExecutionContext };
96
  }) => Promise<any> | any;
97
  /** Directory containing wrangler.toml */
98
  configPath?: string;
99
  /** Environment name */
100
  environment?: string;
101
  /** Persist state across requests */
102
  persist?: boolean | string;
103
}
104
```
105

106
### Vite Configuration Utilities
107

108
Utilities for working with Vite configuration in Remix projects.
109

110
```typescript { .api }
111
/**
112
 * Load and resolve Vite configuration for Remix
113
 * @param options - Configuration loading options
114
 * @returns Resolved Vite configuration
115
 */
116
function resolveViteConfig(options: {
117
  configFile?: string;
118
  mode?: string;
119
  root: string;
120
}): Promise<ResolvedViteConfig>;
121

122
/**
123
 * Extract Remix plugin context from Vite configuration
124
 * @param viteConfig - Resolved Vite configuration
125
 * @returns Remix plugin context or undefined
126
 */
127
function extractRemixPluginContext(
128
  viteConfig: ResolvedViteConfig
129
): Promise<RemixPluginContext | undefined>;
130

131
/**
132
 * Load Vite plugin context for Remix
133
 * @param options - Context loading options
134
 * @returns Remix plugin context
135
 */
136
function loadVitePluginContext(options: {
137
  configFile?: string;
138
  root?: string;
139
}): Promise<RemixPluginContext | undefined>;
140
```
141

142
### Build Manifest Types
143

144
Types for Vite build manifests and configuration.
145

146
```typescript { .api }
147
interface BuildManifest {
148
  /** Build version identifier */
149
  version: string;
150
  /** Build mode (development/production) */
151
  mode: string;
152
  /** Entry point information */
153
  entry: {
154
    /** Module path */
155
    module: string;
156
    /** Import dependencies */
157
    imports: string[];
158
  };
159
  /** Route-specific build information */
160
  routes: Record<string, {
161
    /** Route identifier */
162
    id: string;
163
    /** Parent route ID */
164
    parentId?: string;
165
    /** Route path pattern */
166
    path?: string;
167
    /** Module path */
168
    module: string;
169
    /** Import dependencies */
170
    imports?: string[];
171
  }>;
172
}
173

174
interface Preset {
175
  /** Preset name */
176
  name: string;
177
  /** Preset configuration function */
178
  configure: (args: PresetConfigureArgs) => void | Promise<void>;
179
}
180

181
type ServerBundlesFunction = (args: {
182
  branch: RouteBranch;
183
}) => string | Promise<string>;
184
```
185

186
**Usage Examples:**
187

188
```typescript
189
// Advanced Vite configuration with presets
190
import { defineConfig } from "vite";
191
import { vitePlugin } from "@remix-run/dev";
192

193
const myPreset: Preset = {
194
  name: "my-preset",
195
  configure: async ({ remixConfig, viteConfig }) => {
196
    // Custom preset logic
197
  },
198
};
199

200
export default defineConfig({
201
  plugins: [
202
    vitePlugin({
203
      presets: [myPreset],
204
      serverBundles: ({ branch }) => {
205
        return branch.some(route => route.id.includes("admin")) 
206
          ? "admin-bundle" 
207
          : "main-bundle";
208
      },
209
    }),
210
  ],
211
});
212
```
213

214
```typescript
215
// Using Cloudflare proxy in development
216
import { defineConfig } from "vite";
217
import { vitePlugin, cloudflareDevProxyVitePlugin } from "@remix-run/dev";
218

219
export default defineConfig({
220
  plugins: [
221
    cloudflareDevProxyVitePlugin({
222
      configPath: "./wrangler.toml",
223
      environment: "development",
224
      persist: true,
225
    }),
226
    vitePlugin(),
227
  ],
228
});
229
```