# @lark-apaas/fullstack-vite-preset
Vite preset for Fullstack applications, providing a complete replacement for `@lark-apaas/fullstack-rspack-preset`.
## Installation
```bash
npm install @lark-apaas/fullstack-vite-preset vite
```
## Usage
### Basic Usage
Create a `vite.config.ts` file in your project root:
```typescript
import path from 'path';
import { defineConfig } from '@lark-apaas/fullstack-vite-preset';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'client/src'),
},
},
});
```
### Environment Variables
The preset automatically reads the following environment variables:
| Variable | Description | Default |
|----------|-------------|---------|
| `NODE_ENV` | development \| production | `development` |
| `NEED_ROUTES` | Enable route parsing | `true` |
| `CLIENT_BASE_PATH` | Client base path | `/` |
| `ASSETS_CDN_PATH` | Production CDN path | `/` |
| `SERVER_PORT` | Backend server port | `3000` |
| `CLIENT_DEV_PORT` | Vite dev server port | `8080` |
| `CLIENT_DEV_HOST` | Vite dev server host | `localhost` |
| `LOG_DIR` | Log directory | `./logs` |
### Scripts
Update your `package.json` scripts:
```json
{
"scripts": {
"dev:client": "vite --config vite.config.ts",
"build:client": "vite build --config vite.config.ts",
"preview:client": "vite preview --config vite.config.ts"
}
}
```
## Features
### Included Plugins
- **React Plugin**: With automatic JSX runtime and styled-jsx support via Babel
- **Route Parser Plugin**: Automatically parses React Router routes from `app.tsx`
- **Slardar Plugin**: Injects performance monitoring SDK
- **View Context Plugin**: Injects server-side context variables
- **OG Meta Plugin**: Injects Open Graph meta tags
- **Module Alias Plugin**: Provides enhanced `clsx` (with tailwind-merge) and `echarts` (with theme)
- **HMR Timing Plugin**: Tracks and reports HMR compilation metrics
### Module Aliases
The preset automatically replaces:
- `clsx` - Enhanced with `tailwind-merge` for automatic Tailwind class deduplication
- `echarts` - Pre-configured with a shadcn-compatible theme (`ud`)
### Dev Server Features
- Proxy configuration for `/api` and `/__innerapi__` routes
- HTML requests proxied to backend server
- SnapDom proxy middleware for debugging
- Dev logs and OpenAPI middleware integration
### Build Features
- Source maps in development
- Terser minification in production
- Code splitting enabled (Vite default)
- PostCSS with `postcss-import` plugin
## HTML Template
Ensure your `client/index.html` uses ES module scripts:
```html
Fullstack App
```
## Migration from Rspack Preset
1. Replace `@lark-apaas/fullstack-rspack-preset` with `@lark-apaas/fullstack-vite-preset`
2. Rename `rspack.config.js` to `vite.config.ts`
3. Update the config to use the new `defineConfig` function
4. Update `client/index.html` to use `type="module"` for scripts
5. Update package.json scripts to use `vite` instead of `rspack`
## License
MIT