payload/templates/with-vercel-website

Payload Website Template

This is 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.

You can deploy to Vercel, using Neon and Vercel Blob Storage with one click:

This template is right for you if you are working on:

• A personal or enterprise-grade website, blog, or portfolio
• A content publishing platform with a fully featured publication workflow
• Exploring the capabilities of Payload

Core features:

• Pre-configured Payload Config
• Authentication
• Access Control
• Layout Builder
• Draft Preview
• Live Preview
• Redirects
• SEO
• Website

Quick Start

To spin up this example locally, follow these steps:

Clone

After you click the Deploy button above, you'll want to have standalone copy of this repo on your machine. If you've already cloned this repo, skip to Development.

Development

1. First clone the repo if you have not done so already

2. cd my-project && cp .env.example .env to copy the example environment variables. You'll need to add the POSTGRES_URL and BLOB_READ_WRITE_TOKEN from your Vercel project to your .env if you want to use Vercel Blob and the Neon database that was created for you.

   NOTE: If the connection string value includes localhost or 127.0.0.1, the code will automatically use a normal postgres adapter instead of Vercel.. You can override this functionality by setting forceUseVercelPostgres: true if desired.

3. pnpm install && pnpm dev to install dependencies and start the dev server

4. open http://localhost:3000 to open the app in your browser

That's it! Changes made in ./src will be reflected in your app. Follow the on-screen instructions to login and create your first admin user. Then check out Production once you're ready to build and serve your app, and Deployment when you're ready to go live.

Docker (Optional)

If you prefer to use Docker for local development instead of a local Postgres instance, the provided docker-compose.yml file can be used.

To do so, follow these steps:

• Modify the POSTGRES_URL in your .env file to postgres://postgres@localhost:54320/<dbname>
• Modify the docker-compose.yml file's POSTGRES_DB to match the above <dbname>
• Run docker-compose up to start the database, optionally pass -d to run in the background.

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 collections that have access to the admin panel and unpublished content. 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.

• 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. It features pre-configured sizes, focal point and manual resizing to help you manage your pictures.

• Categories

  A taxonomy used to group posts 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 access control is setup to limit access to various content based based on publishing status.

• users: Users can access the admin panel and create or edit content.
• posts: Everyone can access published posts, but only users can create, update, or delete them.
• pages: Everyone can access published pages, but only users can create, update, or delete them.

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

Layout Builder

Create unique page layouts for any type of content using a powerful layout builder. This template 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 template. See Website for more details.

Lexical editor

A deep editorial experience that allows complete freedom to focus just on writing content without breaking out of the flow with support for Payload blocks, media, links and other features provided out of the box. See Lexical docs.

Draft Preview

All posts 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 template 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.

Live preview

In addition to draft previews you can also enable live preview to view your end resulting page as you're editing content with full support for SSR rendering. See Live preview docs for more details.

SEO

This template 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 template. See Website for more details.

Search

This template also pre-configured with the official Payload Saerch Plugin to showcase how SSR search features can easily be implemented into Next.js with Payload. 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 template 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 template. See Website for more details.

Website

This template includes a beautifully designed, production-ready front-end built with the Next.js App Router, served right alongside your Payload app in a instance. This makes it so that you can deploy both your backend and website where you need it.

Core features:

• Next.js App Router
• TypeScript
• React Hook Form
• Payload Admin Bar
• TailwindCSS styling
• shadcn/ui components
• User Accounts and Authentication
• Fully featured blog
• Publication workflow
• Dark mode
• Pre-made layout building blocks
• SEO
• Search
• Redirects
• Live preview

Development

To spin up this example locally, follow the Quick Start. Then Seed the database with a few pages, posts, and projects.

Docker

Alternatively, you can use Docker to spin up this template locally. To do so, follow these steps:

1. Follow steps 1 and 2 from above, the docker-compose file will automatically use the .env file in your project root
2. Next run docker-compose up
3. Follow steps 4 and 5 from above to login and create your first admin user

That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.

Seed

To seed the database with a few pages, posts, and projects you can click the 'seed database' link from the admin panel.

The seed script will also create a demo user for demonstration purposes only:

• Demo Author
  • Email: demo-author@payloadcms.com
  • Password: password

NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.

Questions

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