Skip to content

ManUtopiK/vite-fastify-boilerplate

Repository files navigation

vite-fastify-boilerplate

GitHub license GitHub package.json version GitHub issues Coverage Status Sync Vulnerabilities Status Twitter

Enhance your Fastify DX with the power of Vite & Vitest.

Features

  • ⚡ All the power of Vite (Next Generation Frontend Isomorphic Tooling):
    • Lightning fast HMR (hot module replacement) in dev mode with Vite Plugin Node.
    • Smart & instant watch mode, like HMR for tests with Vitest.
  • 🛠️  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 and Why Vitest.

Get started

  1. Clone this repo or use tiged with:
degit https://github.com/ManUtopiK/vite-fastify-boilerplate
  1. Install:
pnpm install

Start dev mode using Vite:

pnpm dev

Start test mode using Vitest:

pnpm test

Start test mode with coverage:

pnpm coverage

Compile typescript to javascript:

pnpm build

Start for production:

pnpm start

Code

  • Main file: src/app.ts
  • Configure logger: src/logger.ts
  • Change port in .env

Docs

Ressources

Add vite plugin example

Import .gql and .graphql files

  1. Install packages:

    pnpm add graphql graphql-tag
    pnpm add -D vite-plugin-simple-gql
  2. Configure vite.config.ts:

    import gql from 'vite-plugin-simple-gql'

    And add gql() to plugins:

    plugins: [gql(), ...]

Now you can import your graphql files in your code:

// 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. 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!