Skip to content

quickstart.mdx

Latest commit

 

History

History
203 lines (162 loc) · 4.96 KB

quickstart.mdx

File metadata and controls

203 lines (162 loc) · 4.96 KB
title description
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

Install the CLI as a dev dependency in your project: 
<CodeGroup>
```bash npm
npm install -D strapi2front
```

```bash pnpm
pnpm add -D strapi2front
```

```bash yarn
yarn add -D strapi2front
```

```bash bun
bun add -D strapi2front
```
</CodeGroup>
Run the init command to create a configuration file: 
```bash
npx strapi2front init
```

This creates a `strapi.config.ts` file in your project root with sensible defaults.
Update the generated config file with your Strapi URL and token: 
```typescript 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
  },
});
```

<Tip>
Store your API token in a `.env` file and never commit it to version control:
```bash .env
STRAPI_URL=http://localhost:1337
STRAPI_TOKEN=your-token-here
```
</Tip>
Run the sync command to fetch your Strapi schema and generate code: 
```bash
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:

```typescript 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"],
});
```
```typescript 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
});
```
```typescript 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:

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

Next Steps

Explore all configuration options Learn about generated service methods Set up your framework integration View the complete CLI reference