Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHub
Community
RoadmapDiscordCommunity Help
Payload Cloud

Deploy your entire stack in one place with Payload Cloud.

LoginCloud Pricing
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOPublishing WorkflowsVisual EditorAI TranslationsAI Writing Assistant
Customer Stories
MicrosoftHello BelloHope NetworkTektonMy290
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case study
New projectLogin
New projectLogin

Bundlers

Payload has two official bundlers, the Webpack Bundler and the Vite Bundler. You must install a bundler to use the admin panel.

Install a bundler

Webpack (recommended):

1
yarn add @payloadcms/bundler-webpack

Vite (beta):

1
yarn add @payloadcms/bundler-vite
Configure the bundler
1
// payload.config.ts
2
3
import { buildConfig } from 'payload/config'
4
import { webpackBundler } from '@payloadcms/bundler-webpack'
5
// import { viteBundler } from '@payloadcms/bundler-vite'
6
7
export default buildConfig({
9
admin: {
10
bundler: webpackBundler() // or viteBundler()
11
},
13
})

What are bundlers?

At their core, a bundler's main goal is to take a bunch of files and turn them into a few optimized files that you ship to the browser. The admin UI has a root index.html entry point, and from there the bundler traverses the dependency tree, bundling all of the files that are required from that point on.

Since the bundled file is sent to the browser, it can't include any server-only code. You will need to remove any server-only code from your admin UI before bundling it. You can learn more about excluding server code section.

Next

Excluding server-only code from admin UI

On this page
Star on GitHub

Star

Chat on Discord

Discord

online