vite

> Base Vite configuration with sensible defaults and an optional React helper.

✨ Features

• ⚡ Sensible defaults: build, dev server and preview settings ready to go
• 🎯 Typed factory: createViteConfig() with typed options
• ⚛️ React helper: createReactViteConfig() takes your @vitejs/plugin-react
• 🔀 Dual format: ESM and CommonJS builds

📦 Installation

npm install --save-dev @jmlweb/vite-config vite

For React projects, also install the plugin (optional):

npm install --save-dev @vitejs/plugin-react

> 💡 Upgrading? See the Migration Guide.

🚀 Quick Start

vite.config.ts

import { createViteConfig } from '@jmlweb/vite-config';

export default createViteConfig();

React:

vite.config.ts

import { createReactViteConfig } from '@jmlweb/vite-config';
import react from '@vitejs/plugin-react';

export default createReactViteConfig({ reactPlugin: react() });

💡 Examples

Path aliases

import { resolve } from 'node:path';
import { createViteConfig } from '@jmlweb/vite-config';

export default createViteConfig({
  resolve: { alias: { '@': resolve(import.meta.dirname, 'src') } },
});

Build and server settings

import { createViteConfig } from '@jmlweb/vite-config';

export default createViteConfig({
  build: { sourcemap: true, target: ['es2020', 'chrome87', 'safari14'] },
  server: { port: 3000, open: true },
  preview: { port: 8080 },
});

Any other Vite option

Use options for everything not covered by the typed fields (it is spread last):

import { createViteConfig } from '@jmlweb/vite-config';

export default createViteConfig({
  options: { base: '/app/', define: { __APP_VERSION__: '"1.0.0"' } },
});

📋 Configuration Details

Defaults

Option	Default
build.outDir	'dist'
build.sourcemap	false
build.target	'esnext'
build.minify	Vite default (esbuild up to Vite 7, Oxc from Vite 8)
server.port	5173
server.strictPort	false
server.open	false
server.host	'localhost'
preview.port	4173

build, server and preview are merged shallowly over these defaults. The defaults are exported as BASE_DEFAULTS.

API

Export	Description
createViteConfig	Options: plugins, resolve.alias, build, server, preview, options
createReactViteConfig	Same options plus required reactPlugin, placed first in plugins
BASE_DEFAULTS	Default build, server and preview values
ViteConfigOptions	Options type
UserConfig, Plugin	Re-exported Vite types

🎯 When to Use

• ✅ Vite apps (vanilla, React, Vue, …) with shared defaults
• ✅ Consistent dev server and build settings

Not for you if you need a fully custom Vite setup: write your own config.

🔧 Extending the Configuration

Add plugins through plugins (for React, they follow reactPlugin). Branch on the mode with a function config:

import { defineConfig } from 'vite';
import { createViteConfig } from '@jmlweb/vite-config';

export default defineConfig(({ mode }) =>
  createViteConfig({
    build: { sourcemap: mode !== 'production' },
  }),
);

📝 Usage with Scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

npm run dev      # dev server
npm run build    # production build
npm run preview  # preview the build

📋 Requirements

• Node.js >= 22.12.0
• Vite >= 5.0.0

📦 Peer Dependencies

• vite (>=5.0.0)
• @vitejs/plugin-react (optional): only for createReactViteConfig

🔗 Related Packages

• @jmlweb/vitest-config - Vitest config
• @jmlweb/tsconfig-react - TypeScript config for React
• @jmlweb/oxlint-config-react - Oxlint config for React
• @jmlweb/oxfmt-config-base - Oxfmt config

🔄 Migration Guide

1.x to 2.0

Breaking: Node.js >= 22.12.0 is required.

1. Upgrade Node.js to 22.12.0 or later.
2. Update: npm install --save-dev @jmlweb/vite-config@latest

2.0.2: minify

minify is no longer forced to 'esbuild' (it fails on Vite 8 without esbuild). Vite’s own default applies; pass build.minify to pin one.

See the Changelog for details.

📄 License

MIT