https://github.com/yracnet/vite-plugin-builder
https://github.com/yracnet/vite-plugin-builder
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yracnet/vite-plugin-builder
- Owner: yracnet
- License: mit
- Created: 2025-01-07T13:10:18.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-08T21:32:57.000Z (10 months ago)
- Last Synced: 2025-02-18T08:40:02.483Z (9 months ago)
- Language: TypeScript
- Size: 65.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - vite-plugin-builder (⭐1) - Enable dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR). (Recently Updated / [Jan 30, 2025](/content/2025/01/30/README.md))
- fucking-awesome-vite - vite-plugin-builder - Enable dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR). (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-builder - Enable dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR). (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-builder
[](https://opensource.org/licenses/MIT)
[](https://travis-ci.org/yracnet/vite-plugin-builder)
`vite-plugin-builder` is a Vite plugin designed to simplify the setup of dual compilation for Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in Vite projects. It allows you to build both server and client entry points in a single Vite project, streamlining the development of modern web applications that require both SSR and CSR functionality.
## Features
- **Dual Compilation**: Supports compiling both SSR and CSR in a single project.
- **Vite Integration**: Designed to work seamlessly with Vite, leveraging its fast build system and hot module replacement.
- **SPA (Single-Page Application) Support**: Makes it easier to manage the SSR and CSR workflows for modern SPAs.
- **TypeScript Support**: Written in TypeScript, providing full type safety and better developer experience.
- **Minimal Setup**: Easy to integrate with minimal configuration required.
## Installation
To install `vite-plugin-builder` in your Vite project, you can use npm or yarn:
```bash
npm install vite-plugin-builder --save-dev
```
or
```bash
yarn add vite-plugin-builder --dev
```
## Documentation
For detailed documentation, please refer to the main [README.md](packages/plugin/README.md) file located in the `plugin` package.
## Example
You can explore a basic usage example by looking at the [basic example](packages/examples/basic) in the `examples` folder.
## Usage
### Basic Setup
1. Install the plugin as a dev dependency (as shown above).
2. Import and configure the plugin in your `vite.config.ts` file.
```ts
import { defineConfig } from "vite";
import path from "path";
import react from "@vitejs/plugin-react-swc";
import builder from "vite-plugin-builder";
// https://vite.dev/config/
export default defineConfig({
base: "/",
plugins: [
react(),
// Simple Configuration
builder({
serverEntry: "server/main.js",
serverConfig: {
outDir: "sandbox",
},
clientEntry: {
main: "index.html",
},
clientConfig: {
outDir: "sandbox/spa",
},
}),
],
});
```
This configuration generates the following structure:
```bash
# Server Out Dir
#/sandbox
/sandbox/app.js
/sandbox/bin/[name]-[hash].js
/sandbox/assets/[name]-[hash].[ext]
# Client Out Dir
#/sandbox/spa
/sandbox/spa/index.html
/sandbox/spa/js/[name]-[hash].js
/sandbox/spa/assets/[name]-[hash].[ext]
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.