Astro TypeScript Templates

A collection of production-ready Astro templates with TypeScript, featuring modern development tools and best practices.

Available Templates

This repository contains multiple template presets:

🚀 React Template (templates/react/)

• Framework: Astro + React + TypeScript
• Styling: Tailwind CSS v4
• Features: SSR support, API routes, form handling
• State Management: React hooks
• Testing: Vitest + React Testing Library

🌟 Vue Template (templates/vue/)

• Framework: Astro + Vue 3 + TypeScript
• Styling: Tailwind CSS v4
• Features: SSR support, API routes, form handling
• State Management: Vue Composition API
• Testing: Vitest + Vue Test Utils

Quick Start

Using npm create

# Create React template
npm create astro@latest my-project -- --template github:your-username/astro-templates/templates/react

# Create Vue template
npm create astro@latest my-project -- --template github:your-username/astro-templates/templates/vue

Manual Installation

1. Clone the repository:

git clone https://github.com/your-username/astro-templates.git
cd astro-templates

2. Copy your preferred template:

# For React
cp -r templates/react/ my-project/

# For Vue
cp -r templates/vue/ my-project/

3. Install dependencies:

cd my-project
npm install

4. Start development:

npm run dev

Template Features

🏗️ Architecture

• Feature-based structure: Organized by domain/feature
• Separation of concerns: Clear boundaries between UI, logic, and data
• Type safety: Strict TypeScript configuration
• API integration: Built-in API routes with proper error handling

🎨 Styling

• Tailwind CSS v4: Latest version with improved performance
• Responsive design: Mobile-first approach
• Modern CSS: CSS custom properties and modern features

🛠️ Development Tools

• ESLint: Code linting with framework-specific rules
• Prettier: Code formatting
• Husky: Git hooks for code quality
• Lint-staged: Run linters on staged files
• Vitest: Fast unit testing

📦 Build & Deploy

• SSR Support: Server-side rendering enabled
• Node.js Adapter: Ready for deployment
• Optimized builds: Production-ready configurations

Template Structure

templates/
├── react/                 # React template
│   ├── src/
│   │   ├── components/    # Reusable components
│   │   ├── pages/         # Astro pages
│   │   ├── layout/        # Layout components
│   │   └── styles/        # Global styles
│   ├── public/            # Static assets
│   ├── package.json       # Dependencies
│   ├── astro.config.mjs   # Astro configuration
│   └── tsconfig.json      # TypeScript config
└── vue/                   # Vue template
    ├── src/
    │   ├── components/    # Vue SFC components
    │   ├── composables/   # Vue composables
    │   ├── pages/         # Astro pages
    │   ├── layout/        # Layout components
    │   └── styles/        # Global styles
    ├── public/            # Static assets
    ├── package.json       # Dependencies
    ├── astro.config.mjs   # Astro configuration
    └── tsconfig.json      # TypeScript config

Development

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run format       # Format code with Prettier
npm run test         # Run tests

Code Quality

Both templates include:

• Pre-commit hooks: Automatic linting and formatting
• Strict TypeScript: Enhanced type checking
• ESLint rules: Framework-specific best practices
• Prettier config: Consistent code formatting

API Routes

Both templates include example API routes:

• GET /api/todos/get - Fetch todos
• POST /api/todos/post - Create todo
• DELETE /api/todos/[id]/delete - Delete todo
• GET /api/todos/[id]/get - Get single todo
• PATCH /api/todos/[id]/patch - Update todo
• PUT /api/todos/[id]/put - Replace todo

Contributing

See CONTRIBUTING.md for development setup and contribution guidelines.

License

MIT License - see LICENSE for details.

Changelog

See CHANGELOG.md for version history and updates.