Quickstart

This guide will get you from zero to generating types and services from your Strapi CMS in minutes.

Prerequisites

Before you begin, make sure you have:

Node.js 18+ installed on your machine
A Strapi v4 or v5 instance running (local or remote)
An API token from your Strapi admin panel

Installation

Install Strapi2Front

Install the CLI as a dev dependency in your project:

npm install -D strapi2front

Initialize Configuration

Run the init command to create a configuration file:

npx strapi2front init

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

Configure Your Connection

Update the generated config file with your Strapi URL and token:

strapi.config.ts

import { defineConfig } from "strapi2front";

export default defineConfig({
  // Your Strapi instance URL
  url: process.env.STRAPI_URL || "http://localhost:1337",
  
  // Your API token (create one in Strapi Admin > Settings > API Tokens)
  token: process.env.STRAPI_TOKEN,

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

  // Features to generate
  features: {
    types: true,      // TypeScript interfaces
    services: true,   // API service functions
    schemas: true,    // Zod validation schemas
    actions: true,    // Astro Actions (if using Astro)
    upload: false,    // File upload helpers
  },
});

Store your API token in a .env file and never commit it to version control:

.env

STRAPI_URL=http://localhost:1337
STRAPI_TOKEN=your-token-here

Generate Code

Run the sync command to fetch your Strapi schema and generate code:

npx strapi2front sync

You should see output like:

◇  strapi2front sync
│
◇  Configuration loaded
│
◇  Strapi v5
│
◇  Schema fetched: 3 collections, 1 singles, 5 components
│
◇  Generated 18 files
│
└  Types, Services, Schemas, Actions ready to use!

Using Generated Code

Once generation completes, you can import and use the generated types and services:

Fetch Data
With Relations
Form Validation

import { articleService } from "@/strapi/collections/article/service";

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

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

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

import { articleService } from "@/strapi/collections/article/service";

// Populate relations
const { data: articles } = await articleService.findMany({
  populate: ["author", "category", "tags"],
});

// Access typed relations
articles.forEach(article => {
  console.log(article.title);
  console.log(article.author.name);  // ✅ Fully typed
  console.log(article.category.name); // ✅ Fully typed
});

import { articleCreateSchema } from "@/strapi/collections/article/schemas";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

const form = useForm({
  resolver: zodResolver(articleCreateSchema),
});

const onSubmit = async (data) => {
  // Data is validated and typed!
  await articleService.create(data);
};

Add to Your Workflow

Add a script to your package.json to regenerate code when your Strapi schema changes:

package.json

{
  "scripts": {
    "strapi:sync": "strapi2front sync",
    "dev": "strapi2front sync && vite"
  }
}

Next Steps

Configuration

Explore all configuration options

Services Guide

Learn about generated service methods

Framework Setup

Set up your framework integration

API Reference

View the complete CLI reference

Get Started

Configuration

Guides

Framework Integrations

Prerequisites

Installation

Using Generated Code

Add to Your Workflow

Next Steps

Configuration

Services Guide

Framework Setup

API Reference

Get Started

Configuration

Guides

Framework Integrations

​Prerequisites

​Installation

​Using Generated Code

​Add to Your Workflow

​Next Steps

Configuration

Services Guide

Framework Setup

API Reference

Prerequisites

Installation

Using Generated Code

Add to Your Workflow

Next Steps