Installation

System Requirements

• Node.js: Version 18.0 or higher
• Strapi: Version 4.x or 5.x
• Package Manager: npm, pnpm, yarn, or bun

Installation

npm

npm install -D strapi2front

pnpm

pnpm add -D strapi2front

yarn

yarn add -D strapi2front

bun

bun add -D strapi2front

Creating a Configuration File

Run the init command to create a configuration file:

npx strapi2front init

This will create a strapi.config.ts file with sensible defaults.

Consejo

The init command will detect your package manager and suggest installing Zod if you enable schema generation.

Strapi API Tokens

strapi2front uses two separate tokens for different purposes:

1. Sync Token (STRAPI_SYNC_TOKEN)

Used by the CLI to fetch your schema during development. Create one in the Strapi admin panel:

1. Go to Settings > API Tokens
2. Click Create new API Token
3. Give it a name like “strapi2front sync”
4. Set the token type to Custom
5. Configure the following permissions:

Required permissions:

Plugin	Permission	Description
Content-type-builder	getComponents	Read component schemas
Content-type-builder	getComponent	Read individual component
Content-type-builder	getContentTypes	Read content type schemas
Content-type-builder	getContentType	Read individual content type

Optional permissions (if using i18n):

Plugin	Permission	Description
I18n	listLocales	Read available locales

Precaución

Do NOT deploy STRAPI_SYNC_TOKEN to production. It has access to the content-type-builder API, which should only be used during development.

2. Frontend Token (STRAPI_TOKEN)

Used by your generated client to fetch content at runtime. Create a separate token with only the permissions your app needs:

1. Go to Settings > API Tokens
2. Click Create new API Token
3. Give it a name like “Frontend”
4. Set the token type to Custom or Read-only (depending on your needs)
5. Grant only the permissions your frontend needs (e.g., find and findOne for your content types)

Environment Variables

Create a .env file in your project root:

STRAPI_URL=http://localhost:1337

# Sync token: Used by strapi2front to sync schema (development only)
# Permissions: content-type-builder, i18n
STRAPI_SYNC_TOKEN=your-sync-token-here

# Frontend token: Used by your app to fetch content (production)
# Configure with only the permissions your app needs
STRAPI_TOKEN=your-frontend-token-here

Then reference them in your config:

import { defineConfig } from "strapi2front";

export default defineConfig({
  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,
  // ... rest of config
});

Consejo

Getting started? You can use just STRAPI_TOKEN with broad permissions for both sync and frontend. As you move to production, create a dedicated STRAPI_SYNC_TOKEN and limit STRAPI_TOKEN to what your frontend needs.

Precaución

Never commit your API tokens to version control. Use environment variables instead.

TypeScript vs JavaScript

strapi2front supports both TypeScript and JavaScript projects:

TypeScript (default)

import { defineConfig } from "strapi2front";

export default defineConfig({
  outputFormat: "typescript", // .ts files with type annotations
  // ...
});

JavaScript with JSDoc

import { defineConfig } from "strapi2front";

export default defineConfig({
  outputFormat: "jsdoc", // .js files with JSDoc comments
  // ...
});

Verifying Installation

Run the sync command to test your setup:

npx strapi2front sync

If successful, you’ll see output similar to:

◇  strapi2front sync
│
◇  Configuration loaded
│
◇  Strapi v5
│
◇  Schema fetched: 3 collections, 1 singles, 5 components
│
◇  Generated 18 files
│
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  Generated 18 files in src/strapi                           │
│                                                             │
│  Files generated:                                           │
│    src/strapi/shared/utils.ts                               │
│    src/strapi/shared/client.ts                              │
│    src/strapi/shared/locales.ts                             │
│    src/strapi/collections/article/types.ts                  │
│    src/strapi/collections/article/schemas.ts                │
│    src/strapi/collections/article/service.ts                │
│    src/strapi/collections/article/actions.ts                │
│    ... and 11 more                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘
│
└  Types, Services, Schemas, Actions ready to use!

Troubleshooting

Connection refused

Make sure your Strapi server is running and the URL is correct.

401 Unauthorized

Your API token may be invalid or expired. Generate a new one in Strapi admin.

Could not find strapi.config

Run npx strapi2front init to create the configuration file.