Ir al contenido
Strapi2Front

Quick Start

Esta página aún no está disponible en tu idioma.

This guide will help you set up strapi2front and generate your first types and services.

Prerequisites

Section titled “Prerequisites”
  • Node.js 18 or later
  • A running Strapi instance (v4 or v5)
  • An API token from your Strapi admin panel

Setup

Section titled “Setup”

  1. Install strapi2front

    Terminal window
    npm install -D strapi2front

  2. Initialize configuration

    Terminal window
    npx strapi2front init

    This creates a strapi.config.ts file in your project root.

  3. Configure your Strapi connection

    The init command creates a strapi.config.ts with the full configuration:

    import { defineConfig } from "strapi2front";
    

    export default defineConfig({
      // Strapi connection
      url: process.env.STRAPI_URL || "http://localhost:1337",
      // Uses STRAPI_SYNC_TOKEN for sync, falls back to STRAPI_TOKEN
      token: process.env.STRAPI_SYNC_TOKEN || process.env.STRAPI_TOKEN,
    

      // API prefix (default: "/api")
      apiPrefix: "/api",
    

      // Output format: "typescript" (.ts) or "jsdoc" (.js with JSDoc)
      outputFormat: "typescript",
    

      // Output configuration
      output: {
        path: "src/strapi",
      },
    

      // Features to generate
      features: {
        types: true,
        services: true,
        actions: true,   // Astro actions (TypeScript only)
        schemas: true,   // Zod validation schemas
        upload: false,   // File upload helpers
      },
    

      // Strapi version
      strapiVersion: "v5",
    });

  4. Generate types and services

    Terminal window
    npx strapi2front sync

Using Generated Code

Section titled “Using Generated Code”

After running sync, you can import and use the generated code:

// Import the service for your content type
import { articleService } from "@/strapi/collections/article/service";


// Fetch articles with pagination
const { data: articles, pagination } = await articleService.findMany({
  pagination: { page: 1, pageSize: 10 },
});


// Fetch ALL articles (handles pagination automatically)
const allArticles = await articleService.findAll();


// Fetch with filters and relations
const { data: published } = await articleService.findMany({
  filters: { publishedAt: { $notNull: true } },
  populate: ["author", "category"],
  sort: ["publishedAt:desc"],
});


// Get a single article by documentId
const article = await articleService.findOne("abc123xyz");


// Create a new article
const newArticle = await articleService.create({
  title: "My New Article",
  content: "Article content here...",
});

Adding to package.json

Section titled “Adding to package.json”

Add a script to regenerate when your Strapi schema changes:

{
  "scripts": {
    "strapi:sync": "strapi2front sync"
  }
}

Next Steps

Section titled “Next Steps”