319d3355de
This PR introduces a few changes to improve turbopack compatibility and ensure e2e tests pass with turbopack enabled ## Changes to improve turbopack compatibility - Use correct sideEffects configuration to fix scss issues - Import scss directly instead of duplicating our scss rules - Fix some scss rules that are not supported by turbopack - Bump Next.js and all other dependencies used to build payload ## Changes to get tests to pass For an unknown reason, flaky tests flake a lot more often in turbopack. This PR does the following to get them to pass: - add more `wait`s - fix actual flakes by ensuring previous operations are properly awaited ## Blocking turbopack bugs - [X] https://github.com/vercel/next.js/issues/76464 - Fix PR: https://github.com/vercel/next.js/pull/76545 - Once fixed: change `"sideEffectsDisabled":` back to `"sideEffects":` ## Non-blocking turbopack bugs - [ ] https://github.com/vercel/next.js/issues/76956 ## Related PRs https://github.com/payloadcms/payload/pull/12653 https://github.com/payloadcms/payload/pull/12652
Payload Form Builder Example
The Payload Form Builder Example demonstrates how to implement the official Form Builder Plugin in Payload.
IMPORTANT—This example includes a fully integrated Next.js App Router front-end that runs on the same server as Payload.
Quick Start
- Run the following command to create a project from the example:
npx create-payload-app --example form-builder
-
cp .env.example .envto copy the example environment variables -
pnpm dev,yarn devornpm run devto start the server- Press
ywhen prompted to seed the database
- Press
-
open http://localhost:3000to access the home page -
open http://localhost:3000/adminto access the admin panel- Login with email
demo@payloadcms.comand passworddemo
- Login with email
That's it! Changes made in ./src will be
How it works
The Form Builder Plugin automatically adds the forms and formSubmissions collections to your config which your front-end can use to query forms and submit form data. You can embed forms into layout building blocks by referring a forms document in a relationship field.
See the official Form Builder Plugin for full details.
Development
To spin up this example locally, follow the Quick Start.
Seed
On boot, a seed script is included to scaffold a basic database for you to use as an example. You can remove pnpm seed from the dev script in the package.json to prevent this behavior. You can also freshly seed your project at any time by running pnpm seed. This seed creates a user with email demo@payloadcms.com and password demo along with a home page and an example page with two versions, one published and the other draft.
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.
Production
To run Payload in production, you need to build and serve 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 choose to self-host your app, check out the Deployment docs for more details.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.