BK
Back to Index

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

Date:

Github Repo

Latest Update

Following the deprecation of Lucia, I migrated session management to the recommended approach at 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 with contributions from both Astro and Fastify maintainers. However, it didn’t work out of the box. Although I forked it and fixed dev mode, production mode remained problematic.

  2. Node Middleware: Astro’s documentation provides middleware instructions 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 and let me know your thoughts.