Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Vanilla-IceCream/vite-plugin-fastify
Fastify plugin for Vite with Hot-module Replacement.
https://github.com/Vanilla-IceCream/vite-plugin-fastify
fastify hmr vite
Last synced: about 2 months ago
JSON representation
Fastify plugin for Vite with Hot-module Replacement.
- Host: GitHub
- URL: https://github.com/Vanilla-IceCream/vite-plugin-fastify
- Owner: Vanilla-IceCream
- License: mit
- Created: 2022-10-24T02:45:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-13T03:44:27.000Z (7 months ago)
- Last Synced: 2023-11-14T03:51:09.100Z (7 months ago)
- Topics: fastify, hmr, vite
- Language: TypeScript
- Homepage: https://vitesheet.onrender.com/vite-plugin-fastify/
- Size: 196 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vite - vite-plugin-fastify - Fastify plugin for Vite with Hot-module Replacement. (Plugins / Fastify)
README
# vite-plugin-fastify
Fastify plugin for Vite with Hot-module Replacement.
## Installation
Install `vite-plugin-fastify` with your favorite package manager:
```sh
$ npm i vite-plugin-fastify -D
# or
$ yarn add vite-plugin-fastify -D
# or
$ pnpm i vite-plugin-fastify -D
# or
$ bun add vite-plugin-fastify -D
```
## Usage
### Add Scripts
Add the following scripts to your `package.json` file:
```json
{
// ...
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
// ...
}
```
### Configuration
Add the following configuration to your `vite.config.ts`:
```ts
// vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import fastify from 'vite-plugin-fastify';
export default defineConfig({
server: {
host: '127.0.0.1',
port: 3000,
},
plugins: [
fastify({
appPath: './src/app.ts', // Default: /src/app.ts
serverPath: './src/server.ts', // Default: /src/server.ts
}),
],
resolve: {
alias: {
'~': resolve(__dirname, 'src'),
},
},
});
```
```ts
// src/app.ts
import fastify from 'fastify';
export default () => {
const app = fastify();
app.get('/api/hello-world', async (req, reply) => {
return reply.send('Hello, World!');
});
return app;
};
```
```ts
// src/server.ts
import app from './app';
const server = app();
const start = () => {
try {
await server.listen({ host: '127.0.0.1', port: 3000 });
} catch (err) {
server.log.error(err);
if (process.env.NODE_ENV === 'production') {
process.exit(1);
}
}
};
start();
```
## Known Issues
This plugin does not support WebSocket.
For a workaround, use `vite-node` for development:
```diff
- "dev": "vite",
+ "dev": "vite-node -w src/server.ts",
```
Set to `false` to disable HMR during development:
```diff
plugins: [
fastify({
+ devMode: false,
}),
],
```
Add `import.meta.hot` support to vite-node for HMR:
```diff
const start = async () => {
try {
await server.listen({ host: '127.0.0.1', port: 3000 });
} catch (err) {
server.log.error(err);
if (process.env.NODE_ENV === 'production') {
process.exit(1);
}
}
+ if (import.meta.hot) {
+ import.meta.hot.on('vite:beforeFullReload', async () => {
+ await server.close();
+ });
+ import.meta.hot.dispose(async () => {
+ await server.close();
+ });
+ }
};
```
See the [`examples`](./examples) folder for more details.
## File-based Routing
`vite-plugin-fastify` does not support `@fastify/autoload` when executing the build command, as Vite is a bundler that places bundled files in the `dist/assets` directory. If support is required, `@fastify/autoload` would need to be made compatible with `import.meta.glob` syntax, or alternatively, consider using `vite-plugin-fastify-routes`.
- [vite-plugin-fastify-routes](https://github.com/Vanilla-IceCream/vite-plugin-fastify-routes)