Features

strapi2front can generate different types of code. Enable or disable features based on your needs.

Feature Configuration

features: {
  types: true,      // TypeScript interfaces
  services: true,   // API service functions
  actions: true,    // Astro actions
  schemas: true,    // Zod validation schemas
  upload: false,    // File upload helpers
}

Types

Generates TypeScript interfaces for all your content types.

features: {
  types: true,
}

Generated:

• Interfaces for collections, singles, and components
• Interfaces for dynamic zones (discriminated unions)
• Request/response types for API operations
• Strapi system types (media, pagination, etc.)

// Generated type example
export interface Article {
  id: number;
  documentId: string;
  title: string;
  content: string;
  author?: Author;
  createdAt: string;
  updatedAt: string;
  publishedAt: string | null;
}

Services

Generates API service functions with full CRUD operations.

features: {
  services: true,
}

Generated:

• findMany() - List with filters, pagination, sorting (returns paginated response)
• findAll() - Fetch ALL entries (handles pagination automatically)
• findOne() - Get by documentId
• create() - Create new entry
• update() - Update existing entry
• delete() - Delete entry

// Generated service example
export const articleService = {
  findMany: (options?, clientOptions?) => /* returns { data, pagination } */,
  findAll: (options?, clientOptions?) => /* returns all items, auto-paginated */,
  findOne: (documentId, options?, clientOptions?) => /* returns single item */,
  create: (data, clientOptions?) => /* creates and returns new item */,
  update: (documentId, data, clientOptions?) => /* updates and returns item */,
  delete: (documentId, clientOptions?) => /* deletes item */,
};

Note

Services require types to be enabled for proper type inference.

Actions

Generates Astro actions for server-side API calls.

features: {
  actions: true,
}

Caution

Actions are only generated for TypeScript projects (outputFormat: "typescript").

Generated:

• Type-safe Astro actions wrapping services
• Input validation with Zod
• Error handling

// Generated action example
export const article = {
  find: defineAction({
    input: articleFindSchema,
    handler: async (input) => {
      return articleService.find(input);
    },
  }),
  // ... other actions
};

Schemas

Generates Zod validation schemas for form validation.

features: {
  schemas: true,
}

Generated:

• *CreateSchema - For creating new entries
• *UpdateSchema - For updating entries (all fields optional)
• Relation schemas with connect/disconnect/set support

// Generated schema example
export const articleCreateSchema = z.object({
  title: z.string(),
  content: z.string(),
  author: z.string().optional(), // relation as documentId
});

export const articleUpdateSchema = z.object({
  title: z.string().optional(),
  content: z.string().optional(),
  author: z.string().optional(),
});

Advanced Relations

Enable full Strapi v5 relation API support:

schemaOptions: {
  advancedRelations: true,
}

This generates schemas supporting:

// Shorthand: array of documentIds
author: ["documentId1", "documentId2"]

// Longhand: connect/disconnect/set
author: {
  connect: [{ documentId: "id1", position: { after: "id2" } }],
  disconnect: ["id3"],
}

Upload

Generates file upload helpers for uploading media to Strapi.

features: {
  upload: true,
}

Generated:

• shared/upload-client.ts - Browser-side upload client (uses public token)
• shared/upload-action.ts - Astro Action for server-side uploads (requires actions: true)

Two Upload Strategies

Strategy	File	Token	Security	Use Case
Astro Action	upload-action.ts	STRAPI_TOKEN (private)	High	Recommended for Astro projects
Public Client	upload-client.ts	PUBLIC_STRAPI_UPLOAD_TOKEN (restricted)	Medium	Any framework, direct browser uploads

Astro Action (Recommended)

Server-side upload via Astro Actions. The private STRAPI_TOKEN never leaves the server.

// In your component
import { actions } from 'astro:actions';

const result = await actions.upload({
  file: myFile,
  alternativeText: 'My image description'
});

Public Upload Client

Direct browser-to-Strapi uploads using a restricted token with upload-only permissions.

import { uploadFile } from '@/strapi/shared/upload-client';

const media = await uploadFile(file, {
  alternativeText: 'Image description'
});

Caution

The PUBLIC_STRAPI_UPLOAD_TOKEN should only have upload permissions. Never grant delete or update permissions to this token.

Environment Variables

When upload is enabled, add these to your .env:

# For public upload client (browser → Strapi direct)
PUBLIC_STRAPI_URL=http://localhost:1337
PUBLIC_STRAPI_UPLOAD_TOKEN=your-restricted-upload-token

Create the upload token in: Strapi Admin > Settings > API Tokens

• Set permissions: Upload > upload (only)
• Do not enable delete or update permissions

Selective Generation

Generate only specific features using CLI flags:

# Only types
npx strapi2front sync --types-only

# Only services
npx strapi2front sync --services-only

# Only actions
npx strapi2front sync --actions-only

# Only upload helpers
npx strapi2front sync --upload-only

Recommended Setup

For most projects:

features: {
  types: true,     // Always useful
  services: true,  // For API calls
  schemas: true,   // For form validation
  actions: false,  // Enable only if using Astro
}

For Astro projects:

features: {
  types: true,
  services: true,
  schemas: true,
  actions: true,  // Enable Astro actions
}