> ## Documentation Index
> Fetch the complete documentation index at: https://docs.strapi2front.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get up and running with Strapi2Front in under 5 minutes

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

<Steps>
  <Step title="Install Strapi2Front">
    Install the CLI as a dev dependency in your project:

    <CodeGroup>
      ```bash npm theme={null}
      npm install -D strapi2front
      ```

      ```bash pnpm theme={null}
      pnpm add -D strapi2front
      ```

      ```bash yarn theme={null}
      yarn add -D strapi2front
      ```

      ```bash bun theme={null}
      bun add -D strapi2front
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize Configuration">
    Run the init command to create a configuration file:

    ```bash theme={null}
    npx strapi2front init
    ```

    This creates a `strapi.config.ts` file in your project root with sensible defaults.
  </Step>

  <Step title="Configure Your Connection">
    Update the generated config file with your Strapi URL and token:

    ```typescript strapi.config.ts theme={null}
    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
      },
    });
    ```

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

      ```bash .env theme={null}
      STRAPI_URL=http://localhost:1337
      STRAPI_TOKEN=your-token-here
      ```
    </Tip>
  </Step>

  <Step title="Generate Code">
    Run the sync command to fetch your Strapi schema and generate code:

    ```bash theme={null}
    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!
    ```
  </Step>
</Steps>

## Using Generated Code

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

<Tabs>
  <Tab title="Fetch Data">
    ```typescript theme={null}
    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"],
    });
    ```
  </Tab>

  <Tab title="With Relations">
    ```typescript theme={null}
    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
    });
    ```
  </Tab>

  <Tab title="Form Validation">
    ```typescript theme={null}
    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);
    };
    ```
  </Tab>
</Tabs>

## Add to Your Workflow

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

```json package.json theme={null}
{
  "scripts": {
    "strapi:sync": "strapi2front sync",
    "dev": "strapi2front sync && vite"
  }
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="gear" href="/configuration/config-file">
    Explore all configuration options
  </Card>

  <Card title="Services Guide" icon="book" href="/guides/services">
    Learn about generated service methods
  </Card>

  <Card title="Framework Setup" icon="puzzle-piece" href="/integrations/astro">
    Set up your framework integration
  </Card>

  <Card title="API Reference" icon="code" href="/reference/cli">
    View the complete CLI reference
  </Card>
</CardGroup>