netlify-frameworks-vite

Vite + React on Netlify

Setup

Check current versions before pinning. Knowledge cutoffs lag behind npm, and guessing a version tends to fail (npm install rejects it, or worse, installs something incompatible). Before pinning @netlify/vite-plugin, vite, @vitejs/plugin-react, or any other package in package.json, run npm view <pkg> version to get the current latest. Or omit explicit pins and let npm install pick them up. If that check itself fails (no network, registry unreachable), still don't fall back to a guessed exact pin — install without a version (or with @latest) and tell the user live verification wasn't possible so they should confirm the installed versions. Never present an unverified x.y.z as the current release.

Install the Netlify Vite plugin as a dev dependency (it's a build/dev-time tool, not a runtime dependency):

npm install -D @netlify/vite-plugin

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import netlify from "@netlify/vite-plugin";

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

What the Plugin Does

• Enables Netlify Functions, Blobs, DB, and environment variables in local dev
• Handles build output for Netlify deployment
• No need for netlify dev — run npm run dev directly

SPA Routing

For client-side routing (React Router, etc.), add the catch-all redirect:

# netlify.toml
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Netlify Functions

Write functions in netlify/functions/ as usual. The Vite plugin makes them available during local dev at their configured paths.

// netlify/functions/api.ts
import type { Config, Context } from "@netlify/functions";

export default async (req: Request, context: Context) => {
  return Response.json({ message: "Hello from API" });
};

export const config: Config = { path: "/api/hello" };

Forms (AJAX Pattern)

Since Vite + React renders forms client-side, include a hidden HTML form for Netlify to detect, and submit via AJAX: