Astro + React + Hono + Drizzle Starter
Astro, React, Hono, Bun, SQLite, and Drizzle form a split app configuration where the frontend and backend are generated as separate primary parts. Better Fullstack can scaffold this exact compatibility-checked selection.
01 / selection
Stack at a glance
| Role | Technology | Repository description | Scope |
|---|---|---|---|
| Frontend | Astro | Content-focused with Island Architecture | Primary frontend |
| Frontend integration | React | Full React component support (required for tRPC) | Project-wide |
| Backend | Hono | Ultrafast web framework | Primary backend |
| Runtime | Bun | Fast JavaScript runtime & toolkit | Scoped to Hono |
| Database | SQLite | File-based SQL database | Project-wide |
| ORM | Drizzle | TypeScript ORM | Scoped to Hono |
| API | tRPC | End-to-end typesafe APIs | Scoped to Hono |
| Authentication | Better-Auth | The most comprehensive authentication framework for TypeScript | Scoped to Hono |
| CSS | Tailwind CSS | Utility-first CSS framework | Scoped to Astro |
| UI library | daisyUI | Tailwind CSS component library | Scoped to Astro |
02 / architecture
How the pieces fit
- The frontend and backend are separate primary stack parts.
- Bun is scoped to Hono.
- Drizzle is scoped to Hono.
- tRPC is scoped to Hono.
- Better-Auth is scoped to Hono.
- Tailwind CSS is scoped to Astro.
- daisyUI is scoped to Astro.
- Astro's React integration and tRPC are selected together.
03 / output
What gets generated
The virtual generator produced 53 files across 23 directories. The output is a workspace.
Top-level entries
- ./.gitignore
- ./AGENTS.md
- ./CLAUDE.md
- ./README.md
- ./apps
- ./bunfig.toml
- ./package.json
- ./packages
- ./tsconfig.json
- ./turbo.json
Representative files
- README.md
- apps/server/package.json
- apps/web/package.json
- package.json
- packages/api/package.json
- packages/auth/package.json
- packages/config/package.json
- packages/db/package.json
04 / create
Create command
This is the canonical Bun command generated for the selection.
bun create better-fullstack@latest my-app --ecosystem typescript --frontend astro --astro-integration react --css-framework tailwind --ui-library daisyui --backend hono --runtime bun --api trpc --auth better-auth --payments none --email none --file-upload none --logging none --observability none --feature-flags none --realtime none --job-queue none --caching none --rate-limit none --i18n none --search none --vector-db none --file-storage none --cms none --effect none --ai none --state-management none --forms react-hook-form --validation zod --testing vitest --animation none --database sqlite --orm drizzle --db-setup none --package-manager bun --git --web-deploy none --server-deploy none --install --addons turborepo --examples none --ai-docs claude-md agents-md05 / builder
Open in the builder
- fe-w
- astro
- ai
- react
- ui
- daisyui
06 / checks
Compatibility notes
Compatibility checked against Better Fullstack types version 2.3.0.
The generated record has 0 graph issues and 0 disabled selected options. This is a compatibility check, not a claim that this exact scaffold received a runtime smoke verification.
- The selection includes Astro's React integration alongside tRPC.
07 / fit
When to choose this shape
Choose this shape when the browser frontend and API server should remain separate generated parts.
08 / next
Related stacks and guide
Need a walkthrough? Read the related stack guide.
09 / faq
Questions
Is this combination supported?
It passes the repository's compatibility analysis, selected-option checks, stack graph validation, project schema parsing, and virtual generation. That result is described here as compatibility checked.
Does it generate one app or separate parts?
The frontend and backend are generated as separate primary parts. The actual generated output uses a workspace layout.
How can I customize the selection?
Open the generated builder link above. Its query parameters reproduce this selection, and the builder can change compatible options before generating a new command.