Astro x Strapi Starter

All-in-one starter combining Astro, Strapi CMS, and TailwindCSS with support for Strapi Astro Loader and Strapi Astro Blocks Field.

---

✨ Features

• ⚡ Astro 5 - Latest version with ultra-fast static sites
• 📝 Strapi CMS - Headless CMS for content management
• 🧱 Strapi Astro Blocks Field - Modular & flexible content block system
• 🔄 Strapi Astro Loader - Automatic content loading from Strapi
• 🎨 TailwindCSS 4 - Modern utility-first CSS styling
• 📱 Responsive Design - Optimized for all devices
• 🌐 TypeScript - Full type support

---

🚀 Quick Start

1. Use a starter template

# NPM
npm create astro@latest -- --template VirtusLab-Open-Source/astro-strapi-starter

# Yarn
yarn create astro --template VirtusLab-Open-Source/astro-strapi-starter

2. Environment Variables Setup

Create a .env file in the root directory:

# Strapi Configuration
STRAPI_URL=http://localhost:1337
STRAPI_TOKEN=your_strapi_api_token_here

3. Run the Project

# Development mode
npm run dev
# or
yarn dev

Open http://localhost:4321 in your browser.

🗂️ Project Structure

/
├── src/
│   ├── components/
│   │   └── blocks/          # Strapi block components
│   │       ├── BlockRenderer.astro
│   │       ├── TextBlock.astro
│   │       ├── QuoteBlock.astro
│   │       ├── MediaBlock.astro
│   │       ├── CTABlock.astro
│   │       └── HeroBlock.astro
│   ├── pages/
│   │   └── index.astro      # Homepage
│   ├── types/
│   │   └── strapi.ts        # TypeScript types for Strapi
│   ├── content.config.ts    # Strapi Loader configuration
│   └── styles/
│   |   └── global.css
│   ├── utils/
│   │   └── media.ts         # Strapi Media utils
├── package.json
└── astro.config.mjs

📦 Strapi Astro Packages

This project uses:

• @sensinum/astro-strapi-loader - Automatic content loading
• @sensinum/astro-strapi-blocks - Modular & flexible block system

🔨 Available Commands

Command	Action
npm install	Installs dependencies
npm run dev	Starts dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally
npm run astro ...	Run CLI commands like astro add, astro check

🌍 Deploy

Vercel

1. Connect your repository to Vercel
2. Add environment variables in project settings
3. Deploy!

Netlify

1. Connect your repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Add environment variables

📚 Useful Links

• Astro Documentation
• TailwindCSS Documentation
• Strapi Documentation
• Sensinum Astro Strapi Loader
• Sensinum Astro Strapi Blocks Field

🔧 Development

1. Clone the repository
2. Install dependencies:

yarn

3. Run development mode:

yarn dev

4. Check types:

yarn check

🤝 Contributing

We welcome contributions to this project! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please make sure to:

• Follow the existing code style
• Write tests for new features
• Update documentation as needed
• Keep your PR focused and concise

📄 License

Copyright © Sensinum & VirtusLab

This project is licensed under the MIT License - see the LICENSE.md file for details.