docker.recipes

Payload CMS

intermediate

Modern TypeScript headless CMS with great developer experience.

Overview

Payload CMS is a modern headless content management system built specifically for TypeScript developers, offering full type safety and an exceptional developer experience. Unlike traditional CMSs that force you into rigid templates, Payload generates TypeScript types from your content schemas and provides both REST and GraphQL APIs automatically. It combines the flexibility of a headless architecture with powerful admin UI generation, making it ideal for developers who want complete control over their frontend while maintaining content editor-friendly backend interfaces. This stack pairs Payload with MongoDB to create a powerful content platform that leverages MongoDB's flexible document structure for complex content relationships and schema evolution. MongoDB's JSON-like document storage aligns perfectly with Payload's TypeScript-first approach, allowing for rich content modeling without the constraints of relational database tables. The combination enables rapid content schema changes, complex nested structures, and efficient querying for content delivery APIs. This configuration is perfect for development teams building modern web applications, e-commerce platforms, or multi-tenant SaaS products where content flexibility and type safety are paramount. Frontend developers working with React, Next.js, or Vue will particularly benefit from Payload's automatic TypeScript type generation, while content creators get a polished admin interface that adapts to custom field configurations.

Key Features

  • Automatic TypeScript type generation from content collections with full IntelliSense support
  • Built-in authentication and authorization with role-based access control and field-level permissions
  • Rich text editor with custom React components and serializable JSON output
  • Advanced relationship fields supporting one-to-one, one-to-many, and many-to-many associations
  • Configurable file upload handling with support for local storage, S3, and Cloudinary adapters
  • Live preview functionality for draft content with webhook integration
  • MongoDB aggregation pipeline support for complex content queries and analytics
  • Custom React components in admin UI with hooks for extending functionality

Common Use Cases

  • 1Multi-site content management for agencies serving multiple clients from single installation
  • 2E-commerce platforms requiring complex product relationships and inventory management
  • 3Documentation websites with versioning, team collaboration, and API-driven content delivery
  • 4SaaS applications needing user-generated content with role-based publishing workflows
  • 5Mobile app backends requiring structured content delivery with offline sync capabilities
  • 6Corporate websites with multilingual content and approval workflows for compliance
  • 7Developer portfolios and blogs with custom post types and automated deployment triggers

Prerequisites

  • Docker and Docker Compose installed with at least 4GB available RAM for development workloads
  • Node.js 18+ and npm/yarn knowledge for Payload project initialization and customization
  • TypeScript familiarity for schema configuration and custom field development
  • Basic MongoDB concepts including document structure and indexing strategies
  • Understanding of environment variable management for secrets and database connections
  • Port 3000 available for Payload admin interface and API endpoints

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

docker-compose.yml
1services:
2 payload:
3 build: .
4 container_name: payload
5 restart: unless-stopped
6 environment:
7 MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
8 PAYLOAD_SECRET: ${PAYLOAD_SECRET}
9 ports:
10 - "3000:3000"
11 depends_on:
12 - mongodb
13 networks:
14 - payload-network
15
16 mongodb:
17 image: mongo:7
18 container_name: payload-mongodb
19 volumes:
20 - mongodb_data:/data/db
21 networks:
22 - payload-network
23
24volumes:
25 mongodb_data:
26
27networks:
28 payload-network:
29 driver: bridge

.env Template

.env
1DB_NAME=payload
2PAYLOAD_SECRET=your-secret-here

Usage Notes

  1. 1Docs: https://payloadcms.com/docs
  2. 2Create project: npx create-payload-app, then add Dockerfile
  3. 3Access admin at http://localhost:3000/admin - create first user
  4. 4REST API at /api/[collection], GraphQL available
  5. 5TypeScript-first: full type safety and autocompletion
  6. 6Local file uploads, S3, Cloudinary adapters available

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

payload
payload:
  build: .
  container_name: payload
  restart: unless-stopped
  environment:
    MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
    PAYLOAD_SECRET: ${PAYLOAD_SECRET}
  ports:
    - "3000:3000"
  depends_on:
    - mongodb
  networks:
    - payload-network
mongodb
mongodb:
  image: mongo:7
  container_name: payload-mongodb
  volumes:
    - mongodb_data:/data/db
  networks:
    - payload-network

Quick Start

terminal
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4 payload:
5 build: .
6 container_name: payload
7 restart: unless-stopped
8 environment:
9 MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
10 PAYLOAD_SECRET: ${PAYLOAD_SECRET}
11 ports:
12 - "3000:3000"
13 depends_on:
14 - mongodb
15 networks:
16 - payload-network
17
18 mongodb:
19 image: mongo:7
20 container_name: payload-mongodb
21 volumes:
22 - mongodb_data:/data/db
23 networks:
24 - payload-network
25
26volumes:
27 mongodb_data:
28
29networks:
30 payload-network:
31 driver: bridge
32EOF
33
34# 2. Create the .env file
35cat > .env << 'EOF'
36DB_NAME=payload
37PAYLOAD_SECRET=your-secret-here
38EOF
39
40# 3. Start the services
41docker compose up -d
42
43# 4. View logs
44docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal
1curl -fsSL https://docker.recipes/api/recipes/payload-cms/run | bash

Troubleshooting

  • Module build failed with TypeScript errors: Ensure tsconfig.json includes Payload's generated types directory and restart the container
  • MongoDB connection refused: Verify MONGODB_URI environment variable uses service name 'mongodb' not 'localhost' for container networking
  • Admin UI shows 'Unauthorized' after login: Check PAYLOAD_SECRET environment variable is set and consistent across container restarts
  • File uploads failing with permission errors: Verify Docker volume permissions and ensure upload directory is writable by container user
  • API responses missing TypeScript types: Run 'payload generate:types' command and rebuild container to update generated definitions
  • Collection queries returning empty results: Check MongoDB indexes are created properly and collection names match Payload schema slugs exactly

Community Notes

Loading...
Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Ad Space