$docker.recipes

Payload CMS for E-commerce

intermediate

TypeScript CMS for product management.

[i]Overview

Payload CMS is a TypeScript-first headless content management system that emerged as a modern alternative to traditional CMSs, designed specifically for developers who need full control over their content structure and API endpoints. Built with TypeScript from the ground up, Payload generates fully type-safe APIs and provides a powerful admin interface while maintaining complete flexibility in content modeling. The combination of Payload CMS with MongoDB creates a robust e-commerce content management foundation where MongoDB's flexible document structure perfectly complements Payload's dynamic field definitions and complex product schemas. This pairing allows for sophisticated product catalogs with nested variants, dynamic pricing structures, and rich media management without the constraints of rigid relational database schemas. This stack serves developers and agencies building custom e-commerce solutions who need the flexibility of a headless CMS with the power of a document database. Unlike traditional e-commerce platforms, this combination provides complete control over both content structure and data modeling, making it ideal for businesses with unique product requirements or complex catalog hierarchies that don't fit standard e-commerce templates.

[*]Key Features

  • [+]TypeScript-generated APIs with full type safety for product schemas and collection definitions
  • [+]MongoDB aggregation pipeline integration for complex product filtering and analytics
  • [+]Built-in admin panel with customizable field types for managing product variants and pricing
  • [+]Automatic REST and GraphQL endpoint generation from collection schemas
  • [+]Rich media handling with image optimization and variant generation for product galleries
  • [+]MongoDB change streams support for real-time inventory updates and webhooks
  • [+]Flexible access control with role-based permissions for multi-vendor scenarios
  • [+]Plugin architecture allowing custom field types and e-commerce workflow extensions

[#]Common Use Cases

  • [1]Multi-vendor marketplaces requiring complex product categorization and vendor management
  • [2]Fashion e-commerce sites with size matrices, color variants, and seasonal inventory
  • [3]B2B catalogs with customer-specific pricing and bulk order management
  • [4]Digital product stores selling software licenses, courses, or downloadable content
  • [5]Subscription box services with recurring product rotations and member preferences
  • [6]Custom e-commerce solutions for industries with specialized product attributes
  • [7]Headless storefronts powered by React, Vue, or mobile applications

[!]Prerequisites

  • [!]Node.js 18+ and npm/yarn for Payload CMS application development
  • [!]Minimum 2GB RAM for MongoDB operations with product collections and indexing
  • [!]Port 3000 available for Payload admin interface and API endpoints
  • [!]TypeScript knowledge for customizing collection schemas and field definitions
  • [!]Understanding of MongoDB document structure for optimizing product queries
  • [!]Familiarity with headless CMS concepts and API-driven content management
[!]

WARNING: 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    image: node:20-alpine
4    container_name: payload
5    restart: unless-stopped
6    working_dir: /app
7    command: npm start
8    environment: 
9      MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
10      PAYLOAD_SECRET: ${PAYLOAD_SECRET}
11    volumes: 
12      - ./payload-app:/app
13    ports: 
14      - "3000:3000"
15    depends_on: 
16      - mongodb
17    networks: 
18      - payload
19
20  mongodb: 
21    image: mongo:6
22    container_name: payload-mongodb
23    volumes: 
24      - mongodb_data:/data/db
25    networks: 
26      - payload
27
28volumes: 
29  mongodb_data: 
30
31networks: 
32  payload: 
33    driver: bridge

[$].env Template

[.env]
1DB_NAME=payload
2PAYLOAD_SECRET=your-secret-key

[i]Usage Notes

  1. [1]Docs: https://payloadcms.com/docs/
  2. [2]Admin panel at http://localhost:3000/admin, first user becomes admin
  3. [3]Bootstrap: npx create-payload-app --template ecommerce
  4. [4]Define product collections with variants, pricing, images
  5. [5]Built-in REST and GraphQL APIs for headless storefront
  6. [6]TypeScript-first: full type safety for product schemas

Individual Services(2 services)

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

payload
payload:
  image: node:20-alpine
  container_name: payload
  restart: unless-stopped
  working_dir: /app
  command: npm start
  environment:
    MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
    PAYLOAD_SECRET: ${PAYLOAD_SECRET}
  volumes:
    - ./payload-app:/app
  ports:
    - "3000:3000"
  depends_on:
    - mongodb
  networks:
    - payload
mongodb
mongodb:
  image: mongo:6
  container_name: payload-mongodb
  volumes:
    - mongodb_data:/data/db
  networks:
    - payload

[>]Quick Start

[terminal]
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  payload:
5    image: node:20-alpine
6    container_name: payload
7    restart: unless-stopped
8    working_dir: /app
9    command: npm start
10    environment:
11      MONGODB_URI: mongodb://mongodb:27017/${DB_NAME}
12      PAYLOAD_SECRET: ${PAYLOAD_SECRET}
13    volumes:
14      - ./payload-app:/app
15    ports:
16      - "3000:3000"
17    depends_on:
18      - mongodb
19    networks:
20      - payload
21
22  mongodb:
23    image: mongo:6
24    container_name: payload-mongodb
25    volumes:
26      - mongodb_data:/data/db
27    networks:
28      - payload
29
30volumes:
31  mongodb_data:
32
33networks:
34  payload:
35    driver: bridge
36EOF
37
38# 2. Create the .env file
39cat > .env << 'EOF'
40DB_NAME=payload
41PAYLOAD_SECRET=your-secret-key
42EOF
43
44# 3. Start the services
45docker compose up -d
46
47# 4. View logs
48docker 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-commerce/run | bash

[?]Troubleshooting

  • [!]Payload admin shows 'Cannot connect to database': Verify MONGODB_URI environment variable matches the service name 'mongodb:27017' not 'localhost'
  • [!]Collections not appearing in admin panel: Ensure collection files are properly imported in payload.config.ts and TypeScript compilation completed
  • [!]MongoDB connection timeout on startup: Add health checks or increase depends_on conditions, MongoDB may need more time to initialize
  • [!]TypeScript errors in collection schemas: Run 'npm run generate:types' to regenerate Payload types after schema changes
  • [!]File uploads failing: Configure storage adapter in Payload config and ensure proper volume mounts for media directories
  • [!]API endpoints returning 404: Verify collection slug configuration matches the URL path and server has restarted after config changes

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

## Components

payloadmongodb

## Tags

#payload#typescript#cms#headless

## Category

E-Commerce & Business

## Related