feat: add Strapi CMS add-on

[PaulBratslavsky]

Summary

Adds Strapi CMS integration add-on for TanStack Start, creating a sibling directory structure with a TanStack frontend and Strapi backend.

Features

• Article listing with search and pagination
• Article detail pages with dynamic block rendering
• Block types: rich-text, quotes, media, image sliders
• Markdown content rendering with GitHub Flavored Markdown
• URL-based search and pagination (shareable/bookmarkable)
• Graceful error handling with helpful setup instructions
• Uses official @strapi/client SDK with TanStack Start server functions

Video Overview

tanstack-strapi-v1.mp4

Core Changes

Added nextSteps property to display post-creation setup instructions:

• packages/create/src/types.ts - Added to AddOnBaseSchema
• packages/create/src/create-app.ts - Added handling in report function
• Both marked with TODO comments for review on whether this belongs in core

Test Plan

1. Create the app

node packages/cli/dist/bin.js create my-app --add-ons strapi

2. Start the Strapi server

cd server
npm install
npm run develop

3. Set up Strapi admin

1. Open http://localhost:1337/admin
2. Create an admin account
3. Go to Content Manager > Article
4. Create a new article with title, description, cover image, and content blocks
5. IMPORTANT: Click "Publish" button - articles must be published to appear in the API

4. Start the TanStack app

cd my-app
npm install
npm run dev

5. Verify features

• Visit http://localhost:3000/demo/strapi - articles list displays
• Search filters results in real-time
• Pagination navigates between pages
• Click article to view detail page
• All blocks render correctly (rich-text, quote, media, slider)
• Images load with fallback on error
• URL params persist (?query=test&page=2)

Error states to verify

• Stop Strapi server → shows "Cannot Connect" with setup instructions
• Delete all articles → shows "No Articles Yet" with creation guide
• Search for non-existent term → shows "No Results Found"

Files Added

packages/create/src/frameworks/react/add-ons/strapi/
├── info.json
├── package.json
├── README.md
└── assets/src/
    ├── components/
    │   ├── blocks/ (block-renderer, rich-text, quote, media, slider)
    │   ├── markdown-content.tsx
    │   ├── pagination.tsx
    │   ├── search.tsx
    │   └── strapi-image.tsx
    ├── data/
    │   ├── strapi-sdk.ts
    │   └── loaders/articles.ts
    ├── lib/strapi-utils.ts
    ├── routes/demo/
    │   ├── strapi.tsx
    │   └── strapi_.$articleId.tsx
    └── types/strapi.ts

Dependencies Added

Package	Purpose
@strapi/client	Official Strapi SDK
react-markdown	Markdown rendering
remark-gfm	GitHub Flavored Markdown
use-debounce	Debounced search input

---