@netlify/vite-plugin

Vite plugin that emulates Netlify's platform features within your Vite dev server.

Feature Support

| Feature | Supported | | ---------------------- | --------- | | Functions | ✅ Yes | | Edge Functions | ✅ Yes | | Blobs | ✅ Yes | | Cache API | ✅ Yes | | AI Gateway | ✅ Yes | | Database | ✅ Yes | | Redirects and Rewrites | ✅ Yes | | Headers | ✅ Yes | | Environment Variables | ✅ Yes | | Image CDN | ✅ Yes |

This module is not intended to be a full replacement for the Netlify CLI.

Installation

npm install -D @netlify/vite-plugin

Usage

Add the plugin to your vite.config.js or vite.config.ts:

import { defineConfig } from 'vite'
import netlify from '@netlify/vite-plugin'

export default defineConfig({
  plugins: [netlify()],
})

Configuration options

The plugin accepts the following options:

• middleware (boolean, default: true): Attach a Vite middleware that intercepts requests and handles them in the same way as the Netlify production environment
• blobs: Configure blob storage functionality
• edgeFunctions: Configure edge functions
• functions: Configure serverless functions
• headers: Configure response headers
• images: Configure Image CDN functionality
• redirects: Configure URL redirects
• staticFiles: Configure static file serving

EXPERIMENTAL: Building your app for deployment

The build options prepare your app's server build for deployment to Netlify, so you don't need a framework-specific adapter or plugin. They're currently supported for TanStack Start and SolidStart 2 projects.

• build.enabled (boolean, default: false): Prepare the server build for deployment to Netlify
• build.displayName (string, default: @netlify/vite-plugin server handler): A display name for the serverless function or edge function deployed to Netlify

import { defineConfig } from 'vite'
import netlify from '@netlify/vite-plugin'

export default defineConfig({
  plugins: [netlify({ build: { enabled: true } })],
})