# Building a Type-Safe Full-Stack Starter with Fastify and Astro

> A complete starter template combining Astro, Fastify, tRPC, Lucia, React, NextUI, and Drizzle into a single type-safe monolith.

- Author: Brian Kimball
- Published: 2024-07-25
- Tags: development, fastify, astro, typescript
- Canonical: https://brian-kimball.com/blog/fastify-astro-starter/
- Markdown: https://brian-kimball.com/blog/fastify-astro-starter/index.md

[Github Repo](https://github.com/bskimball/astro-fastify-starter)

### Latest Update

Following the deprecation of [Lucia](https://github.com/lucia-auth/lucia/discussions/1707), I migrated session management to the recommended approach at [lucia-next.pages.dev](https://lucia-next.pages.dev/). This update also includes general fixes and improvements, such as resolving dark mode screen flashes.

## Why This Stack?

As a solo developer, I often build JavaScript applications with separated server and client builds. While this is a valid approach, managing state across both can be complex.

I missed the simplicity of server-generated content enriching the client. Meta-frameworks like Next.js, Remix, Nuxt, and Astro handle this with SSR, but I wanted a solution that combined Astro's frontend capabilities with a robust backend like Fastify.

## The Two Integration Attempts

I explored two integration approaches:

1. **Astro Adapter for Fastify:** I found a [repository](https://github.com/matthewp/astro-fastify) with contributions from both Astro and Fastify maintainers. However, it didn't work out of the box. Although I [forked it](https://github.com/matthewp/astro-fastify) and fixed dev mode, production mode remained problematic.

2. **Node Middleware:** Astro's documentation provides [middleware instructions](https://docs.astro.build/en/guides/integrations-guide/node/#middleware) for Node adapters. While this offers a clean separation, the example server wasn't in TypeScript. Since I planned to use tRPC and Drizzle, a non-TypeScript backend was a dealbreaker.

Ultimately, I realized I could update my npm scripts to use `tsx` for watching and `rollup` for building. This flexible configuration aligns with Vite's tooling and the recommended Astro setup.

## What's Included

This starter combines Astro, Fastify, tRPC, Lucia, React, NextUI, and Drizzle. It features:

- Full TypeScript support for end-to-end type safety.
- Session-based authentication via Lucia.
- Pre-configured login and registration flows.

Check out the [Github Repo](https://github.com/bskimball/astro-fastify-starter) and let me know your thoughts.