Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timnghg/elysia-vite
https://github.com/timnghg/elysia-vite
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/timnghg/elysia-vite
- Owner: timnghg
- Created: 2023-07-31T04:20:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-11T04:20:07.000Z (about 1 year ago)
- Last Synced: 2024-11-11T21:34:44.405Z (about 1 month ago)
- Language: TypeScript
- Size: 18.6 KB
- Stars: 69
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-elysia - Vite - Simple plugin that helps you use Vite. It serve your entry html file with Vite's scripts injected. (Plugins)
README
# elysia-vite ![Test](https://github.com/timnghg/elysia-vite/actions/workflows/main.yml/badge.svg)
Simple [Elysia](https://elysiajs.com/) plugin that helps you use Vite. It serve your entry html file with Vite's scripts injected.
## 1. Installation
### 1.1. Vite and plugins
Please follow [Vite's offical document](https://vitejs.dev/guide/). The following code is my simple React setup.
```bash
# Bash:
# Install vite itself
bun add vite -d# add your Vite's plugin, DO NOT RUN if you aren't using React.
bun add @vitejs/plugin-react -d
``````js
// File: vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";// https://vitejs.dev/config/
export default defineConfig({
root: "src/client", // replace with your frontend code dir
plugins: [
react() // replace with your plugin
],
});
```### 1.2. `elysia-vite`
```bash
bun add elysia-vite
```## 2. Usage
### Use Elysia `elysia-vite` plugin
```js
// File: index.ts
const {Elysia} = require('elysia')
const {elysiaVite} = require('elysia-vite')
const app = new Elysia()
// 1. use as plugin
.use(elysiaVite({
base: '/app', // url path to serve index.html file or leave blank to serve as root path
viteConfigFile: `${import.meta.dir}/vite.config.ts`, // absolute path to your vite config file
entryHtmlFile: `${import.meta.dir}/src/client/index.html`, // absolute path to your entry html file
entryClientFile: `${import.meta.dir}/src/client/index.tsx`, // absolute path to your entry script file
isReact: true, // inject React's specific HMR code @see https://vitejs.dev/guide/api-hmr.html
placeHolderDevScripts: '', // placeholder to replace vite scripts
}))
.listen(3000)// goto http://localhost:3000/app
```