Astro + Payload CMS Starter

This is a project starter for Astro + Payload CMS using Turborepo.

Requirements

• Node.js 20+
• Turborepo
• pnpm (recommended)
• MongoDB - Installed and running locally, or you can sign up for a free MongoDB Atlas server.

Create Project

To create a new project using this starter repo as an example, run the following command:

npx create-turbo@latest -e https://github.com/vigetlabs/astro-payload-starter

Follow the prompts and choose a package manager. pnpm is recommended. The project will be set up with all dependencies installed.

Next, copy the environment variable files for the cms and web apps.

cp apps/cms/.env.example apps/cms/.env
cp apps/web/.env.example apps/web/.env

After your project is created, be sure to remove this "create project" section from your new project's readme file, and update the rest of the readme as needed.

Setup

pnpm install
cp apps/cms/.env.example apps/cms/.env
cp apps/web/.env.example apps/web/.env

Tip: pnpm might be hard to type, so you may want to use a shorter alias like p or pn instead.

What's included?

This Turborepo includes the following apps and packages:

Apps

• @repo/cms: a Payload CMS app
• @repo/web: an Astro app

Packages

• @repo/eslint-config: shared ESLint configurations
• @repo/typescript-config: shared tsconfig.jsons used throughout the monorepo
• @repo/ui: a stub Astro component library used by the web app above

Utilities

This Turborepo has some additional tools already set up:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Develop

To develop all apps and packages, run the following command:

turbo dev

Browse to http://localhost:3000/admin for Payload CMS and http://localhost:4321 for the Astro site!

Build

To build all apps and packages, run the following command:

turbo build

Code Generators

Several custom generators are available for extending the cms app and the ui package in a structured way.

• payload-configuration: Adds a new configuration file for Payload CMS
• astro-component: Adds a new primitive UI component for Astro

To generate new source code using one of these custom generators, run the following command from anywhere within the monorepo:

turbo gen

Select a generator from the list, and follow the prompts to provide the requested information.

For more info on code generators, see the generating code guide, as well as the API reference for the generate command.

Useful Links

• Astro
• Payload CMS
• Turborepo