All packages/@batoanng/vite-config
Config

@batoanng/vite-config

A shared Vite and Vitest baseline for React and TypeScript projects in the workspace.

Version 1.3.11 min read1 entrypoint

Quick install

npm install -D @batoanng/vite-config

Start from the shared Vite config

Both the Vite build config and the Vitest test setup are exported so apps and libraries stay aligned.

Context

What It Covers

Adopt the default Vite stack, then merge in only the project-specific settings you need for build or test behaviour.

  • ⚡ Pre configured Vite settings for React projects
  • 🎯 Supports TypeScript, JSX, aliases, and asset handling
  • 🧪 Vitest test setup with custom environment and plugins
  • 📦 Ideal for libraries and applications alike

✨ Features

  • ⚡ Pre-configured Vite settings for React projects
  • 🎯 Supports TypeScript, JSX, aliases, and asset handling
  • 🧪 Vitest test setup with custom environment and plugins
  • 📦 Ideal for libraries and applications alike
  • 🧩 Easily extendable in consuming apps

Setup

Installation

Bring the package into your project with the published npm entrypoint.

npm install -D @batoanng/vite-config

📦 Installation

npm install -D @batoanng/vite-config

Start

Start from the shared Vite config

Both the Vite build config and the Vitest test setup are exported so apps and libraries stay aligned.

import baseConfig from '@batoanng/vite-config/vite.config';
import { defineConfig, mergeConfig } from 'vite';

export default mergeConfig(baseConfig, defineConfig({
  define: {
    __DEV__: true,
  },
}));

🚀 Usage

vite.config.js

import { viteConfig } from '@batoanng/vite-config';

export default viteConfig;

vitest.config.js

import { vitestConfig } from '@batoanng/vite-config';

export default vitestConfig;

🔧 Customization

To override or extend Vite config:

import { viteConfig } from '@batoanng/vite-config';
import { defineConfig, mergeConfig } from 'vite';

export default mergeConfig(viteConfig, {
  // Add your custom overrides here
  define: {
    __DEV__: true,
  },
});

If you need vite-plugin-dts to use a build-specific TypeScript config, use createViteConfig:

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

export default mergeConfig(
  createViteConfig({
    dts: {
      tsconfigPath: './tsconfig.build.json',
    },
  }),
  {}
);

🧪 Test Setup

  • vitest.config.js: Base Vitest configuration for TypeScript + JSX
  • vitest.setup.ts: Registers testing utilities and mocks
// vite.config.ts
test: {
  globals: true,
  environment: 'jsdom',
  setupFiles: ['@batoanng/vite-config/vitest.setup.ts'],
}

Surface

Exports And Entrypoints

Entrypoints

  • main: index.js

Key files

  • index.js
  • package.json
  • vite.config.js
  • vitest.config.js
  • vitest.setup.ts

Ops

Development Notes

Latest release snapshot

1.3.1

Patch Changes

  • Minimize package size

📁 Files Overview

vite-config/
├── index.js              # Optional re-exports
├── vite.config.js        # Main Vite base config
├── vitest.config.js      # Shared Vitest config
├── vitest.setup.ts       # Test setup file (e.g., global mocks, DOM helpers)

Source docs

Reference

The full README is rendered below so the package guide stays detailed and traceable to the source docs that live with the package itself.

npm version install size

Shared Vite configuration to standardize frontend builds across projects using React, TypeScript, and Vitest.

✨ Features

  • ⚡ Pre-configured Vite settings for React projects
  • 🎯 Supports TypeScript, JSX, aliases, and asset handling
  • 🧪 Vitest test setup with custom environment and plugins
  • 📦 Ideal for libraries and applications alike
  • 🧩 Easily extendable in consuming apps

📦 Installation

npm install -D @batoanng/vite-config

🚀 Usage

vite.config.js

import { viteConfig } from '@batoanng/vite-config';

export default viteConfig;

vitest.config.js

import { vitestConfig } from '@batoanng/vite-config';

export default vitestConfig;

🔧 Customization

To override or extend Vite config:

import { viteConfig } from '@batoanng/vite-config';
import { defineConfig, mergeConfig } from 'vite';

export default mergeConfig(viteConfig, {
  // Add your custom overrides here
  define: {
    __DEV__: true,
  },
});

If you need vite-plugin-dts to use a build-specific TypeScript config, use createViteConfig:

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

export default mergeConfig(
  createViteConfig({
    dts: {
      tsconfigPath: './tsconfig.build.json',
    },
  }),
  {}
);

🧪 Test Setup

  • vitest.config.js: Base Vitest configuration for TypeScript + JSX
  • vitest.setup.ts: Registers testing utilities and mocks
// vite.config.ts
test: {
  globals: true,
  environment: 'jsdom',
  setupFiles: ['@batoanng/vite-config/vitest.setup.ts'],
}

📁 Files Overview

vite-config/
├── index.js              # Optional re-exports
├── vite.config.js        # Main Vite base config
├── vitest.config.js      # Shared Vitest config
├── vitest.setup.ts       # Test setup file (e.g., global mocks, DOM helpers)