Website Development with CMS Cockpit CMS
Cockpit CMS is a self-hosted headless CMS built on PHP that does not require a database by default (uses SQLite or MongoDB). It is well-suited for small projects where a flexible API without complex infrastructure is needed.
Architecture and Features
Cockpit provides:
- Collections — lists of entries (blog posts, products, news)
- Singletons — single sets of fields (site settings, about-page)
- Assets — media file management with transformations
- REST and GraphQL API — for frontend
- Custom Roles — access control
No built-in frontend — only API. Suitable for projects where the frontend is built with Next.js, Nuxt, Astro or mobile applications.
Installation
# Docker (recommended)
docker run -d \
--name cockpit \
-p 8080:80 \
-v $(pwd)/cockpit-data:/var/www/html/storage \
-e COCKPIT_SESSION_NAME=cockpit \
-e COCKPIT_SECRET_KEY=$(openssl rand -hex 32) \
agentejo/cockpit:latest
# Or via PHP on Apache/Nginx
git clone https://github.com/Cockpit-HQ/Cockpit.git /var/www/cockpit
# Configure Nginx vhost, set permissions on storage/
Working with Collections API
const COCKPIT_URL = process.env.COCKPIT_URL;
const COCKPIT_TOKEN = process.env.COCKPIT_API_TOKEN;
// Get collection entries
async function getCollectionItems(collection: string, options = {}) {
const params = new URLSearchParams({
token: COCKPIT_TOKEN!,
...options,
});
const res = await fetch(`${COCKPIT_URL}/api/collections/get/${collection}?${params}`);
return res.json();
}
// Usage
const { entries, total } = await getCollectionItems('posts', {
limit: 10,
skip: 0,
sort: JSON.stringify({ _created: -1 }),
filter: JSON.stringify({ published: true }),
populate: 1, // expands related entries
});
Integration with Next.js
// lib/cockpit.ts
export async function getPosts() {
const data = await getCollectionItems('posts', {
filter: JSON.stringify({ status: 'published' }),
sort: JSON.stringify({ date: -1 }),
fields: JSON.stringify({ title: 1, slug: 1, excerpt: 1, image: 1, date: 1 }),
});
return data.entries;
}
// Singleton (site settings)
export async function getSiteSettings() {
const res = await fetch(
`${COCKPIT_URL}/api/singletons/get/settings?token=${COCKPIT_TOKEN}`
);
return res.json();
}
Image Transformation
Cockpit natively supports resizing:
// URL parameters for transformation
const thumbnailUrl = `${COCKPIT_URL}/api/cockpit/image?token=${token}&src=${encodeURIComponent(imagePath)}&w=800&h=400&m=crop&q=80&o=true`;
A typical Cockpit CMS project (small corporate site with blog, 3–5 collections) takes 5–10 days including frontend.