Contentful Space and Content Model Setup

Setting up Contentful Space and Content Model

A Space in Contentful is an isolated workspace with its own content types, entries, and environments. Proper Content Model structure determines project scalability.

Creating a Space

In app.contentful.com → Add Space. Free plan: 1 space, 25,000 records, 2 locales, 2 users.

Content Model via GUI

Settings → Content Model → Add Content Type:

Blog Post (blogPost)
├── title: Short text (required, unique)
├── slug: Short text (unique, regex: ^[a-z0-9-]+$)
├── excerpt: Short text (max: 500)
├── content: Rich Text
├── heroImage: Media (image)
├── publishedAt: Date & Time
├── author: Reference → Author (1:1)
├── categories: References → Category (many)
└── seoTitle: Short text (max: 60, field-level locale)

Content Model via CLI

npm install -g contentful-cli
contentful login
contentful space export --space-id YOUR_SPACE_ID --export-dir ./backup

# Import model to new space
contentful space import --space-id NEW_SPACE_ID --content-file ./backup/export.json

Environments

Production and staging environments in one space:

master (production) ← CDA_TOKEN_PRODUCTION
staging             ← CDA_TOKEN_STAGING

# Create staging environment
contentful space environment create --name staging --environment-id staging

# Clone model from master
contentful space environment create --name staging \
  --environment-id staging --source master

In SDK:

// For staging
createClient({
  space: SPACE_ID,
  accessToken: STAGING_TOKEN,
  environment: 'staging',
})

API Tokens

Settings → API Keys → Add API Key:

• Content Delivery API (CDA) — public, for frontend
• Preview API — for drafts and Draft Mode
• Content Management API (CMA) — server-side, never in browser

Localization

Settings → Locales → Add Locale. All fields are translatable by default. Can be disabled for specific field.

// Request with locale
const entries = await client.getEntries({
  content_type: 'blogPost',
  locale: 'en',
})

// All locales at once
const entry = await client.getEntry(id, { locale: '*' })
// entry.fields.title = { 'ru': '...', 'en': '...', 'uk': '...' }

Content Model via Contentful CLI + JSON

# Export model
contentful space export --space-id xxx --skip-content --export-dir ./model

# File model/contentful-export-xxx.json contains contentTypes[]
# Edit and import to another space
contentful space import --space-id yyy --content-file ./model/contentful-export-xxx.json

This allows versioning model in git and deployment via CI.

TypeScript types via codegen

npm install -D cf-content-types-generator
npx cf-content-types-generator \
  --spaceId YOUR_SPACE_ID \
  --token YOUR_CMA_TOKEN \
  --out ./src/types/contentful.d.ts

Generates TypeScript interfaces for all Content Types — full type safety for API responses.

Timeline

Setting up Space with 4–6 Content Types, locales, environments, and API tokens — 1 day.