๐ฑ Zerva and Vite
npm install @zerva/vite

Seamlessly integrate Vite development server with Zerva
This package provides a bridge between Vite's powerful development server (with HMR, fast builds, and modern tooling) and Zerva's server-side capabilities, giving you the best of both worlds for full-stack development.
- ๐ฅ Hot Module Replacement (HMR) in development mode
- โก Lightning-fast Vite development server integration
- ๐ฆ Production-ready static file serving with caching
- ๐ Multi-page application support
- ๐ Automatic mode switching between development and production
- ๐ฏ Zero configuration for most use cases
- ๐ ๏ธ TypeScript support out of the box
``bash`
npm install @zerva/vite viteor
pnpm add @zerva/vite viteor
yarn add @zerva/vite vite
`typescript
import { serve } from '@zerva/core'
import { useHttp } from '@zerva/http'
import { useVite } from '@zerva/vite'
// Setup HTTP server
useHttp({
port: 3000,
openBrowser: true,
})
// Integrate Vite
useVite()
// Start the server
serve()
`
That's it! Your Vite project will be served with HMR in development mode, and as optimized static files in production.
`typescript`
useVite({
// Path to your Vite project (default: process.cwd())
root: './frontend',
// Output directory for built files (default: './dist_www')
www: './dist',
// Vite mode: 'development' | 'production' (auto-detected)
mode: 'development',
// Enable asset caching in production (default: true)
cacheAssets: true,
// Optional logging configuration
log: { level: 'info' }
})
- ZERVA_DEVELOPMENT: Set to enable development modeZERVA_VITE
- : Alternative way to enable Vite development modeNODE_ENV
- : Affects mode detection
For optimal organization, keep all source code in a src folder with Zerva server code in src/zerva:
``
my-app/
โโโ src/
โ โโโ components/ # Frontend components
โ โโโ pages/ # Frontend pages
โ โโโ styles/ # CSS/styling files
โ โโโ utils/ # Shared utilities
โ โโโ zerva/ # Zerva server code
โ โ โโโ index.ts # Server entry point
โ โ โโโ modules/ # Server modules
โ โโโ main.ts # Frontend entry point
โโโ public/ # Static assets
โโโ index.html # Main HTML template
โโโ package.json
โโโ vite.config.ts
โโโ dist_www/ # Built frontend files (auto-generated)
Server (src/zerva/index.ts):
`typescript
import { serve } from '@zerva/core'
import { useHttp } from '@zerva/http'
import { useVite } from '@zerva/vite'
useHttp({ port: 3000 })
useVite({
root: '.', // Project root (where vite.config.ts is)
www: './dist_www' // Where built files go
})
serve()
`
Vite Config (vite.config.ts):
`typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // or your preferred framework
export default defineConfig({
plugins: [vue()],
root: '.', // Project root
build: {
outDir: 'dist_www', // Match the 'www' path in useVite()
},
server: {
// Development server will be handled by Zerva
}
})
`
- Optimized asset delivery
- Multi-page app routing support๐ Multi-Page Applications
The package includes built-in support for multi-page applications:
`typescript
// vite.config.ts
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
admin: resolve(__dirname, 'admin/index.html'),
dashboard: resolve(__dirname, 'dashboard/index.html'),
}
}
}
})
`Routes like
/admin/settings will automatically serve /admin/index.html.๐ ๏ธ Advanced Usage
$3
`typescript
import { zervaMultiPageAppIndexRouting } from '@zerva/vite'// In your vite.config.ts
export default defineConfig({
plugins: [
vue(),
zervaMultiPageAppIndexRouting(), // Already included automatically
// Your other plugins...
]
})
`$3
`typescript
import { useVite } from '@zerva/vite'// Only use Vite integration in development
if (process.env.NODE_ENV === 'development') {
useVite({
root: './src-web',
cacheAssets: false, // Disable caching in dev
})
}
`๐งช Testing
The package includes comprehensive tests covering:
- Development and production modes
- Configuration validation
- Multi-page routing
- Error handling
- Asset caching
Run tests with:
`bash
pnpm test
`๐ Examples
Check out the examples directory in the main Zerva repository:
- Basic Vite + Vue - Vue 3 + TypeScript + Vite
- PWA Example - Progressive Web App setup
- Service Worker - Advanced caching strategies
๐ค Related Packages
@zerva/core - Core Zerva functionality
- @zerva/http - HTTP server (required)
- @zerva/bin` - Command-line toolsMIT License - see LICENSE file for details.
- ๐ Documentation
- ๐ Bug Reports
- ๐ฌ Discussions
- โค๏ธ Sponsor