elysia-vite

Simple Elysia 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. The following code is my simple React setup.

1# Bash:
2# Install vite itself
3bun add vite -d
4
5# add your Vite's plugin, DO NOT RUN if you aren't using React.
6bun add @vitejs/plugin-react -d

1// File: vite.config.ts
2import { defineConfig } from "vite";
3import react from "@vitejs/plugin-react";
4
5// https://vitejs.dev/config/
6export default defineConfig({
7  root: "src/client", // replace with your frontend code dir
8  plugins: [
9    react() // replace with your plugin
10  ],
11});

1.2. elysia-vite

1bun add elysia-vite

2. Usage

Use Elysia elysia-vite plugin

1// File: index.ts
2const {Elysia} = require('elysia')
3const {elysiaVite} = require('elysia-vite')
4const app = new Elysia()
5    // 1. use as plugin
6    .use(elysiaVite({
7        base: '/app', // url path to serve index.html file or leave blank to serve as root path
8        viteConfigFile: `${import.meta.dir}/vite.config.ts`, // absolute path to your vite config file
9        entryHtmlFile: `${import.meta.dir}/src/client/index.html`, // absolute path to your entry html file
10        entryClientFile: `${import.meta.dir}/src/client/index.tsx`, // absolute path to your entry script file
11        isReact: true, // inject React's specific HRM code @see https://vitejs.dev/guide/api-hmr.html
12        placeHolderDevScripts: '<!--vite-dev-scripts-->', // placeholder to replace vite scripts
13    }))
14    .listen(3000)
15
16// goto http://localhost:3000/app