Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manutopik/vite-fastify-boilerplate
Fastify boilerplate with Vite & Vitest
https://github.com/manutopik/vite-fastify-boilerplate
boilerplate fastify fastifyjs hmr node-hmr typescript vite vitejs
Last synced: about 2 months ago
JSON representation
Fastify boilerplate with Vite & Vitest
- Host: GitHub
- URL: https://github.com/manutopik/vite-fastify-boilerplate
- Owner: ManUtopiK
- License: gpl-3.0
- Created: 2022-01-11T20:51:41.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T22:25:42.000Z (4 months ago)
- Last Synced: 2024-12-12T20:16:11.311Z (about 2 months ago)
- Topics: boilerplate, fastify, fastifyjs, hmr, node-hmr, typescript, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 176 KB
- Stars: 55
- Watchers: 3
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/ManUtopiK/vite-fastify-boilerplate/blob/main/LICENCE)
[](https://github.com/ManUtopiK/vite-fastify-boilerplate/issues)
[](https://coveralls.io/github/ManUtopiK/vite-fastify-boilerplate?branch=main)
[](https://snyk.io/test/github/ManUtopiK/vite-fastify-boilerplate)
[](https://twitter.com/intent/tweet?text=Wow%21%20%23Fastify%20with%20%23Vitejs%20and%20%23Vitest%20%F0%9F%9A%80&url=https:%2F%2Fgithub.com%2FManUtopiK%2Fvite-fastify-boilerplate)
Enhance your [Fastify](https://github.com/fastify/fastify) DX with the power of [Vite](https://vitejs.dev) & [Vitest](https://vitest.dev/).
## Features
- ⚡ All the power of Vite (Next Generation ~~Frontend~~ Isomorphic Tooling):
- Lightning fast HMR (hot module replacement) in dev mode with [Vite Plugin Node](https://github.com/axe-me/vite-plugin-node#readme).
- Smart & instant watch mode, like HMR for tests with [Vitest](https://vitest.dev/).
- 🛠️ DX setup:
- Vite, Prettier and Typescript with common config, esnext ready and alias `@/*`
- Tests with one Fastify instance setup, code coverage
- Fastify with logger
- Production build without Vite
So, it's super fast donc ça va super vite 🚀
## Why and How
See [Why and How Vite in node](https://github.com/axe-me/vite-plugin-node#why) and [Why Vitest](https://vitest.dev/guide/why.html).
## Get started
1. Clone this repo or use [tiged](https://github.com/tiged/tiged) with:
```bash
degit https://github.com/ManUtopiK/vite-fastify-boilerplate
```
2. Install:
```bash
pnpm install
```
**Start dev mode using Vite:**
```bash
pnpm dev
```
**Start test mode using Vitest:**
```bash
pnpm test
```
**Start test mode with coverage:**
```bash
pnpm coverage
```
**Compile typescript to javascript:**
```bash
pnpm build
```
**Start for production:**
```bash
pnpm start
```
## Code
- Main file: `src/app.ts`
- Configure logger: `src/logger.ts`
- Change port in `.env`
### Docs
- [Vite](https://vitejs.dev/)
- [Vite Plugin Node](https://github.com/axe-me/vite-plugin-node)
- [Vitest](https://vitest.dev/)
- [Fastify](https://www.fastify.io/docs/latest/)
### Ressources
- [Awesome vite](https://github.com/vitejs/awesome-vite)
- [Fastify ecosystem](https://www.fastify.io/ecosystem/)
### Add vite plugin example
#### Import `.gql` and `.graphql` files
1. **Install packages:**
```bash
pnpm add graphql graphql-tag
pnpm add -D vite-plugin-simple-gql
```
2. **Configure `vite.config.ts`:**
```js
import gql from 'vite-plugin-simple-gql'
```
And add `gql()` to `plugins`:
```js
plugins: [gql(), ...]
```
Now you can import your graphql files in your code:
```js
// example.ts
import MyQuery from './MyQuery.gql'
```
## Contributions
If you would like to make any contribution you are welcome to do so.
## Known issues
- `@fastify/autoload` doesn't work.
- Websockets doesn't work with vite-plugin-node. [See here](https://github.com/axe-me/vite-plugin-node/issues/22). To develop with websockets, you should start Fastify as usual.
- Vitest UI doesn't work.
Please create an issue if you found any bugs, to help me improve this project!