13fc94dc4d
TS 5.7 added support for ES2024. By keeping target: “esnext”, we would have accidentally set our minimum supported ES version to ES2024. This sets it to ES2022, which is the version supported by Node 18
Payload White-label Example
This example demonstrates how to re-brand or white-label the Payload Admin Panel by modifying the favicon, icon, logo, ogImage and title suffix.
Quick Start
To spin up this example locally, follow these steps:
- Clone this repo
cp .env.example .envto copy the example environment variablespnpm install && pnpm devto install dependencies and start the dev serveropen http://localhost:3000/adminto access the admin panel- Login with email
dev@payloadcms.comand passwordtest
Re-branding walkthrough
Start by navigating to the payload.config.ts file and then take a look at the admin property.
The following sub-properties have already been configured:
meta.icons: Images that will be displayed as the tab icon.
meta.openGraph.images: Images that will appear in the preview when you share links to your admin panel online and through social media.
meta.titleSuffix: Text that appends the meta/page title displayed in the browser tab — must be a string.
graphics.Logo: Image component to be displayed as the logo on the Sign Up / Login view.
graphics.Icon: Image component displayed above the Nav in the admin panel, often a condensed version of a full logo.
👉 Check out this blog post for a more in-depth walkthrough: White-label the Admin UI
Development
To spin up this example locally, follow the Quick Start.
Seed
On boot, a seed script is included to create a user.
Production
To run Payload in production, you need to build and start the Admin panel. To do so, follow these steps:
- Invoke the
next buildscript by runningpnpm buildornpm run buildin your project root. This creates a.nextdirectory with a production-ready admin bundle. - Finally run
pnpm startornpm run startto run Node in production and serve Payload from the.builddirectory.
Deployment
The easiest way to deploy your project is to use Payload Cloud, a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the deployment documentation for full details.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.