Strapi2Front - The Strapi to Frontend Code Generator

$ npx strapi2front@latest

  ◇ Project configuration detected
  ┌ strapi2front setup
  │
  ◇  Detected Configuration ─────╮
  │                              │
  │  Framework: Astro v^5.16.15  │
  │  TypeScript: enabled         │
  │  Package Manager: pnpm       │
  │                              │
  ├──────────────────────────────╯
  │
  ◇ What is your Strapi URL?
  │ http://localhost:1337
  │
  ◇ What is your Strapi API token?
  │ YOUR API TOKEN
  │
  ◇ What version of Strapi are you using?
  │ Strapi v5
  │
  ◇ Where should we generate the Strapi files?
  │ src/strapi
  │
  ◇ What would you like to generate?
  │ Types, Services, Schemas, Astro Actions
  │
  ◇ Setup complete!
  │ v Created strapi.config.ts
  │ v Updated .env with Strapi credentials
  │ v Created output directory src/strapi
  │
  │ Next steps:
  │  1. Run npx strapi2front sync to generate files
  │  2. Import from src/strapi/collections/*
  │  3. Import services from src/strapi/collections/*.service
  │
  └ Happy Coding!

strapi.config.ts

import { defineConfig } from "strapi2front";

export default defineConfig({
  url: process.env.STRAPI_URL || "http://localhost:1337",
  token: process.env.STRAPI_TOKEN,
  apiPrefix: "/api",
  outputFormat: "typescript",
  output: {
    path: "src/strapi",
  },
  features: {
    types: true,
    services: true,
    actions: true,
    schemas: true,
  },
  strapiVersion: "v5",
});

$ npx strapi2front@latest sync

  ◇  Configuration loaded
  │
  ◇  Version detection complete
  │
  ●  Strapi v5
  │
  ◇  Schema fetched: 3 collections, 1 single, 4 components
  │
  ◇  Generated 18 files
  │
  ◇  Sync complete! ──────────────────────────────╮
  │                                               │
  │  Generated 18 files in src/strapi             │
  │  Files generated:                             │
  │    src/strapi/shared/utils.ts                 │
  │    src/strapi/shared/client.ts                │
  │    src/strapi/shared/locales.ts               │
  │    src/strapi/collections/article/types.ts    │
  │    src/strapi/collections/article/schemas.ts  │
  │    src/strapi/collections/article/service.ts  │
  │    src/strapi/collections/article/actions.ts  │
  │    src/strapi/collections/category/types.ts   │
  │    src/strapi/collections/category/schemas.ts │
  │    src/strapi/collections/category/service.ts │
  │    src/strapi/collections/author/types.ts     │
  │    ... and 10 more                            │
  │                                               │
  ├───────────────────────────────────────────────╯
  │
  └ Types, Services, Schemas, Actions ready to use!

src/pages/index.astro

---
// Server Component: Use services directly
import Layout from "../layouts/Layout.astro";
import { articleService } from "../strapi/collections/article/service";
import type { Article } from "../strapi/collections/article/types";

const { data: articles } = await articleService.find({
  populate: ["cover", "author"],
  sort: ["publishedAt:desc"],
});
---

<Layout title="Blog">
  {articles.map((article: Article) => (
    <article>
      <img src={article.cover?.url} alt={article.title} />
      <h2>{article.title}</h2>
      <span>By {article.author?.name}</span>
    </article>
  ))}
</Layout>

<script>
  // Client Component: Use Astro Actions
  import { actions } from "astro:actions";

  const { data, error } = await actions.strapi.article.find({
    populate: ["cover", "author"],
    filters: { featured: { $eq: true } },
  });
</script>

From to your in seconds_

Your Astro code, automated

From Strapi to your Astro in seconds_

Your Astro code, automated

From to your in seconds_