A two-app workspace that pairs a Strapi 5 headless CMS with an Astro 5 frontend based on the AstroWind starter theme. The sample Articles page demonstrates how the Astro layer can consume Strapi REST endpoints with axios.

• Backend: Strapi 5 (TypeScript), SQLite by default, REST API exposed at http://localhost:1337/api
• Frontend: Astro 5 + Tailwind CSS (AstroWind template), Axios for Strapi API calls
• Tooling: Node.js 18+, npm, optional helper script build.sh for regenerating the frontend scaffold

/
├── backend/   # Strapi application (config, content-types, generated types)
├── frontend/  # AstroWind project with Strapi integration page and shared UI
└── build.sh   # Script initially used to scaffold the frontend and helper files

• backend/config/database.ts – SQLite by default; update to MySQL/PostgreSQL by changing env vars
• backend/src/api/tab – Sample generated collection type (no custom logic yet)
• backend/src/components/flying/tabs.json – Example component schema to illustrate Strapi components

• frontend/src/pages/articles.astro – Fetches /articles from Strapi and renders titles/descriptions
• frontend/src/lib/api.js – Axios instance configured against the Strapi REST base URL
• frontend/astro.config.ts – Astro integrations (Tailwind, sitemap, image compression, etc.)

• Node.js 18.17+ or 20.x (supported by both Strapi and Astro)
• npm 8+
• macOS/Linux/Windows shell

Tip: Strapi will create a .tmp/data.db SQLite file on first run. Delete it to reset content.

# from repo root
npm install --prefix backend
npm install --prefix frontend

Create backend/.env (Strapi generates one automatically when you run npm run develop, but you can seed it manually):

APP_KEYS=replace-this,with-your,own-keys
API_TOKEN_SALT=replace-this
ADMIN_JWT_SECRET=replace-this
TRANSFER_TOKEN_SALT=replace-this
DATABASE_FILENAME=.tmp/data.db

Feel free to add HOST, PORT, or database connection details as needed. Keep these secrets private.

1. Run npm run develop inside backend/ and open http://localhost:1337/admin to create an admin user.
2. In the Content-Type Builder, add Collection Type → Article with at least:
   • title (Text)
   • description (Rich Text or Text)
3. Publish a few entries so /api/articles returns data for the Astro app.

Use the Strapi admin import/export plugin or write scripts in backend/src/index.ts during the bootstrap lifecycle if you prefer automated seeding.

Open two terminals from the repository root:

# Terminal 1 – Strapi CMS (http://localhost:1337)
cd backend
npm run develop

# Terminal 2 – Astro frontend (http://localhost:4321)
cd frontend
npm run dev

Navigate to http://localhost:4321/articles to see the Strapi-powered list. If you change the Strapi base URL or deploy it elsewhere, update frontend/src/lib/api.js accordingly or refactor it to read from an environment variable.

Use curl or a browser to confirm Strapi data is available:

curl http://localhost:1337/api/articles

By default Strapi’s REST API returns { data: [...] }, which is why the Astro page reads data.data in the response handler.

• Strapi:

  cd backend
  npm run build
  npm run start

• Astro:

  cd frontend
  npm run build
  npm run preview

Deploy the backend and frontend separately; expose the Strapi API URL to the frontend during deployment (environment variable, build-time replacement, or proxy).

• Replace the hard-coded Axios base URL with an environment variable or Astro runtime config.
• Add authentication and use Strapi API tokens (configure via http://localhost:1337/admin/settings/api-tokens).
• Model more Strapi collection types/components and render them through Astro pages or islands.
• Extend backend/src/index.ts to seed demo data during the bootstrap phase.

• CORS errors: Adjust backend/config/middlewares.ts or Strapi admin settings to allow the frontend origin.
• Empty articles list: Ensure the Strapi server is running, content is published, and the /api/articles endpoint exists.
• Port conflicts: Override HOST/PORT in backend/.env or start Astro with npm run dev -- --port 3000.

• Commit your .env template (without secrets) for collaborators, e.g. backend/.env.example.
• Automate content sync (Strapi import/export, fixtures, or GraphQL).
• Integrate deployment workflows (Netlify/Vercel for Astro, Render/Strapi Cloud for the CMS).

Happy building!