AstraCMS TanStack Start Example

A full-stack blog application built with AstraCMS and TanStack Start.

Features

• 📝 Blog listing and individual post pages
• 🎨 Modern dark theme with Tailwind CSS
• ⚡ Full SSR support with TanStack Start
• 🔒 Type-safe with TypeScript
• 📱 Responsive design

Getting Started

Prerequisites

• Node.js 18+
• pnpm

Installation

# Clone the repository
git clone https://github.com/your-repo/astracms-tanstack-start-example.git
cd astracms-tanstack-start-example

# Install dependencies
pnpm install

Environment Variables

Create a .env file in the project root:

VITE_ASTRACMS_API_KEY=your_api_key_here

Get your API key from the AstraCMS Dashboard.

Development

pnpm dev

Open http://localhost:3000 to view the app.

Building for Production

pnpm build

Project Structure

src/
├── components/
│   └── Header.tsx       # Navigation header
├── lib/
│   └── astracms.tsx     # AstraCMS provider setup
├── routes/
│   ├── __root.tsx       # Root layout
│   ├── index.tsx        # Home page
│   └── blog/
│       ├── index.tsx    # Blog listing
│       └── $slug.tsx    # Individual post
└── styles.css           # Global styles

Learn More

• AstraCMS Documentation
• TanStack Start Documentation
• @astracms/react Package

License

MIT