Payload Public Demo

This is the code that powers the official public demo of Payload CMS.

This demo utilizes the official Payload Website Template. Use it to power websites, blogs, or portfolios from small to enterprise. This repo includes a fully-working backend, enterprise-grade admin panel, and a beautifully designed, production-ready website.

Core features:

• Payload Public Demo

• Quick Start

• Clone

• Local installation steps:

• How it works

• Collections

• Globals

• Access control

• Premium Content

• Comments

• Layout Builder

• Draft Preview

• SEO

• Redirects

• Website

• Cache

• Eject

• Questions

Quick Start

To spin up this example locally, follow these steps:

Clone

You can clone this repo to your own computer and play around super easily.

To do so, you'll need the following software:

• Yarn or NPM
• NodeJS version 10+
• A Mongo Database - IMPORTANT: you need to either have MongoDB running locally, or have signed up for a free MongoDB Atlas server in order to test this repo locally.

Local installation steps:

1. Clone the repo by running the following command at your terminal:

git clone git@github.com:payloadcms/public-demo.git

Navigate to folder and install dependencies

Type cd ./public-demo and then yarn install to add all required dependencies.

Duplicate the example .env file and fill in your own values

Type cp .env.example .env in your terminal to make a copy of the example .env file, and then edit that file to fill in your own values.

Typically, the only line that you'll need to change within your new .env for local development is the DATABASE_URI value. If you have MongoDB running locally, then you can use the example connection string, but if you are using Mongo Atlas or similar, you'll want to fill this value in with your own connection string.

Fire up the development server

Finally, type yarn dev to start up the server and see it in action!

How it works

The Payload config is tailored specifically to the needs of most websites. It is pre-configured in the following ways:

Collections

See the Collections docs for details on how to extend this functionality.

• #### Users (Authentication)

Users are auth-enabled and encompass both admins and regular users based on the value of their roles field. Only admin users can access your admin panel to manage your website whereas user can authenticate on your front-end to leave comments and read premium content but have limited access to the platform. See Access Control for more details.

For additional help, see the official Auth Example or the Authentication docs.

• #### Posts

Posts are used to generated blog posts, news articles, or any other type of content that is published over time. All posts are layout builder enabled so you can generate unique layouts for each post using layout-building blocks, see Layout Builder for more details. Posts are also draft-enabled so you can preview them before publishing them to your website, see Draft Preview for more details.

Users can also leave comments on posts if they are logged in. Then, editors can log in to review and approve comments before they are published. See Comments for more details.

Posts can also restrict access to content or digital assets behind authentication, see Premium Content for more details.

• ### Comments (Collection)

Comments are used to allow logged-in users to leave comments on posts. Comments are draft-enabled so admins can review and approve them before they are published to your website, see Comments for more details.

• #### Projects

Projects are used to showcase your work. All projects are layout builder enabled so you can generate unique layouts for each project using layout-building blocks, see Layout Builder for more details. Projects are also draft-enabled so you can preview them before publishing them to your website, see Draft Preview for more details.

• #### Pages

All pages are layout builder enabled so you can generate unique layouts for each page using layout-building blocks, see Layout Builder for more details. Pages are also draft-enabled so you can preview them before publishing them to your website, see Draft Preview for more details.

• #### Media

This is the uploads enabled collection used by pages, posts, and projects to contain media like images, videos, downloads, and other assets.

• #### Categories

A taxonomy used to group posts or projects together. Categories can be nested inside of one another, for example "News > Technology". See the official Payload Nested Docs Plugin for more details.

Globals

See the Globals docs for details on how to extend this functionality.

• Header

The data required by the header on your front-end like nav links.

• Footer

Same as above but for the footer of your site.

Access control

Basic role-based access control is setup to determine what users can and cannot do based on their roles, which are:

• admin: They can access the Payload admin panel to manage your site. They can see all data and make all operations.
• user: They cannot access the Payload admin panel and can perform limited operations based on their user (see below).

This applies to each collection in the following ways:

• users: Only admins and the user themselves can access their profile. Anyone can create a user but only admins can delete users.
• posts: Everyone can access published posts, but only admins can create, update, or delete them. Some posts may also have content that is only accessible to users who are logged in. See Premium Content for more details.
• projects: Everyone can access published projects, but only admins can create, update, or delete them.
• pages: Everyone can access published pages, but only admins can create, update, or delete them.
• comments: Everyone can access published comments, but only admins can access draft comments. Users can create new comments but they will be saved as drafts until an admin approves them.

For more details on how to extend this functionality, see the Payload Access Control docs.

Premium Content

Posts can optionally restrict access to content or digital assets behind authentication. This will ensure that only members of your site can access the full post data and its resources. To do this, a premiumContent field is added to the posts collection with read access control set to check for an authenticated user on the request. Every time a user requests a post, this will only return data to those who have access to it:

{
  name: 'premiumContent',
  label: 'Premium Content',
  type: 'blocks',
  access: {
    read: isLoggedIn,
  },
  fields: [
    // content
  ]
}

Comments

Users can leave comments on posts for editors to review and approve before they are published to the website. To do this, a comments collection is added with drafts set to true so that all comments are saved as drafts and inaccessible until an admin approves them. Each comment references a single user and a doc for cross reference. To leave a comment you must be logged-in, and to publish a comment you must has the role admin.

Layout Builder

Create unique page, post, or project layouts for any type of content using a powerful layout builder. This demo comes pre-configured with the following layout building blocks:

• Hero
• Content
• Media
• Call To Action
• Archive

Each block is fully designed and built into the front-end website that comes with this demo. See Website for more details.

Draft Preview

All posts, projects, and pages are draft-enabled so you can preview them before publishing them to your website. To do this, these collections use Versions with drafts set to true. This means that when you create a new post, project, or page, it will be saved as a draft and will not be visible on your website until you publish it. This also means that you can preview your draft before publishing it to your website. To do this, we automatically format a custom URL which redirects to your front-end to securely fetch the draft version of your content.

Since the front-end of this demo is statically generated, this also means that pages, posts, and projects will need to be regenerated as changes are made to published documents. To do this, we use an afterChange hook to regenerate the front-end when a document has changed and its _status is published.

For more details on how to extend this functionality, see the official Draft Preview Example.

SEO

This demo comes pre-configured with the official Payload SEO Plugin for complete SEO control from the admin panel. All SEO data is fully integrated into the front-end website that comes with this demo. See Website for more details.

Redirects

If you are migrating an existing site or moving content to a new URL, you can use the redirects collection to create a proper redirect from old URLs to new ones. This will ensure that proper request status codes are returned to search engines and that your users are not left with a broken link. This demo comes pre-configured with the official Payload Redirects Plugin for complete redirect control from the admin panel. All redirects are fully integrated into the front-end website that comes with this demo. See Website for more details.

Website

This demo includes a beautifully designed, production-ready front-end built with the Next.js App Router, served right alongside your Payload app in a single Express server. This makes is so that you can deploy both apps simultaneously and host them together. If you prefer a different front-end framework, this pattern works for any framework that supports a custom server. If you prefer to host your website separately from Payload, you can easily Eject the front-end out from this demo to swap in your own, or to use it as a standalone CMS. For more details, see the official Custom Server Example.

Core features:

• Next.js App Router
• GraphQL
• TypeScript
• React Hook Form
• Payload Admin Bar
• Authentication
• Fully featured blog
• Publication workflow
• Comments
• Premium content
• User accounts
• Dark mode
• Pre-made layout building blocks
• SEO
• Redirects

Cache

Although Next.js includes a robust set of caching strategies out of the box, Payload Cloud proxies and caches all files through Cloudflare using the Official Cloud Plugin. This means that Next.js caching is not needed and is disabled by default. If you are hosting your app outside of Payload Cloud, you can easily reenable the Next.js caching mechanisms by removing the no-store directive from all fetch requests in ./src/app/_api and then removing all instances of export const dynamic = 'force-dynamic' from pages files, such as ./src/app/(pages)/[slug]/page.tsx. For more details, see the official Next.js Caching Docs.

Eject

If you prefer another front-end framework or would like to use Payload as a standalone CMS, you can easily eject the front-end from this demo. To eject, simply run yarn eject. This will uninstall all Next.js related dependencies and delete all files and folders related to the Next.js front-end. It also removes all custom routing from your server.ts file and updates your eslintrc.js.

Note: Your eject script may not work as expected if you've made significant modifications to your project. If you run into any issues, compare your project's dependencies and file structure with this demo. See ./src/eject for full details.

For more details on how setup a custom server, see the official Custom Server Example.

Questions

If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.