Files

Paul 6b9f178fcb fix: graphql missing options route resulting in failed cors preflight checks in production (#8987 )

GraphQL currently doesn't pass CORS checks as we don't expose an OPTIONS
endpoint which is used for browser preflights.

Should also fix situations like this
https://github.com/payloadcms/payload/issues/8974

2024-11-04 14:20:09 -05:00

public/assets

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

src

fix: graphql missing options route resulting in failed cors preflight checks in production (#8987 )

2024-11-04 14:20:09 -05:00

.env.example

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

.eslintrc.cjs

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

.gitignore

docs(examples): add whitelabel example (#1947 )

2023-01-26 09:24:23 -05:00

.gitignore copy

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

.npmrc

docs(examples): add whitelabel example (#1947 )

2023-01-26 09:24:23 -05:00

.npmrc copy

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

next-env.d.ts

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

nodemon copy.json

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

nodemon.json

chore(examples): update nodemon to respond to prompts

2023-10-10 18:37:33 -04:00

package.json

feat!: upgrade minimum next version to 14.3.0-canary.68 & upgrade react packages, react-toastify (#6387 )

2024-05-17 12:48:37 -04:00

pnpm-lock.yaml

chore: significantly improve eslint performance, lint and prettier everything

2024-08-29 21:25:50 -04:00

README.md

chore: uses discord vanity urls (#2786 )

2023-06-06 15:07:24 -04:00

tsconfig.json

chore: update whitelabel example (#6049 )

2024-04-25 17:24:42 -03:00

README.md

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
cd into this directory and run yarn or npm install
cp .env.example .env to copy the example environment variables
yarn dev or npm run dev to start the server and seed the database
open http://localhost:8000/admin to access the admin panel
Login with email dev@payloadcms.com and password test

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:

favicon: Image that will be displayed as the tab icon.

ogImage: Image that will appear in the preview when you share links to your admin panel online and through social media.

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 serve the Admin panel. To do so, follow these steps:

First invoke the payload build script by running yarn build or npm run build in your project root. This creates a ./build directory with a production-ready admin bundle.
Then run yarn serve or npm run serve to run Node in production and serve Payload from the ./build directory.

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.