https://github.com/giacomorebonato/fastify-vite-plugin
Integrates a Vite SPA into a Fastify application
https://github.com/giacomorebonato/fastify-vite-plugin
fastify fastify-plugin spa vite
Last synced: 2 months ago
JSON representation
Integrates a Vite SPA into a Fastify application
- Host: GitHub
- URL: https://github.com/giacomorebonato/fastify-vite-plugin
- Owner: giacomorebonato
- License: mit
- Created: 2023-07-01T14:52:02.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-08T11:41:42.000Z (almost 3 years ago)
- Last Synced: 2025-10-26T03:57:50.102Z (8 months ago)
- Topics: fastify, fastify-plugin, spa, vite
- Language: TypeScript
- Homepage:
- Size: 166 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 
# vite-plugin-ts
A Fastify plugin to integrate a Vite **SPA** into the current project and serving both frontend and backend from the same host.
It doesn't aim to deal with server side rendering, but you can still do that from your Fastify application.
It could be an interesting use case to render HTML only if the request is made by a bot. A bot can be detected using [isbot package](https://www.npmjs.com/package/isbot).
It's configured to not ship Vite in production and to only serve its produced assets.
## Usage
```typescript
import { fastifyVitePlugin } from 'fastify-vite-plugin'
import Fastify from 'fastify'
const app = Fastify()
// place your routes before the plugin registration
// otherwise the "catch all" route that renders index.html
// for the SPA will take precedence
await app.register(fastifyVitePlugin)
await app.listen({
port: process.env.PORT,
host: process.env.NODE_ENV === 'development' ? '0.0.0.0' : undefined,
})
```
Example `vite.config.ts`
```typescript
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
react(),
VitePWA({
workbox: {
globPatterns: ['**/*.{js,css}'],
navigateFallback: null,
},
includeAssets: ['**/*'],
}),
],
})
```
The above configuration will just work in dev mode.
When you do `npx vite build` for `NODE_ENV=production` make sure that the output is located into `/dist/assets`.
## Options
The following options need to be specified if they are changed in `vite.config.ts.`
* `viteOutDir` defaults to `dist`
* `viteAssetsDir` defaults to `/assets/` relative path for where Vite stores its production assets
## Requirements
* it assumes index.html is placed in the root of the project
* its assumes `npx vite build` is executed before starting the application with `NODE_ENV=production`
* if you are using TypeScript, it should be in the same step where you compile your code to JavaScript