turbo-payload
Turborepo monorepo running Payload 3 with Next.js, Astro and Svelte frontends
108
v?
Other
Updated 7 months agoturbopress
Turborepo monorepo pairing an Astro frontend with a Payload CMS backend
Overview
Summary generated from the READMESets up a Turborepo monorepo with an api app running Payload CMS and a web app built with Astro. Styling uses TailwindCSS and the code is TypeScript throughout, with ESLint and Prettier configured. It requires Node.js, pnpm and Turborepo, and an env file based on the provided example. Payload runs on port 3000 and Astro on port 3001 in development.
Features
- Turborepo monorepo with separate api and web apps
- Payload CMS backend app
- Astro frontend with TailwindCSS
- Shared ESLint configuration package with Prettier
- Payload type generation importable from the api package
- Husky and lint-staged for pre-commit checks
Good for
- Building a headless website with Astro as the frontend and Payload as the CMS
- Starting a monorepo where frontend and CMS live in one repository
From the author
A web + headless CMS turborepo
Get started
This repository is a GitHub template: create your own copy of it in one click.
Create a repository from this templateREADME
TurboPress starter
This is a starter Astro + Payload CMS project using Turborepo.
Why Astro?
Astro allow you to use your favorite UI components and libraries. Mix and match React, Preact, Svelte, Vue, SolidJS, AlpineJS, and Lit to build your own website.
Why PayloadCMS?
I need a headless CMS that is easy to use with TypeScript support. PayloadCMS work really well in this use case.
What's inside?
This Turborepo includes the following packages/apps:
Apps and Packages
api: a Payload appweb: an Astro appeslint-config-custom:eslintconfigurations (includeseslint-config-prettierandeslint-configg-turbo)
Each package/app is 100% TypeScript.
Utilities
This Turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- TailwindCSS for CSS utility
- ESLint for code linting
- Prettier for code formatting
Prerequisites
Install nodejs, pnpm and turborepo on your local machine
Develop
Create a .env file in the root folder, you can use the .env.example file as an example
I use pnpm for this project.
Run the following command:
pnpm installl
pnpm dev
By default, the payloadCMS will run on port 3000, and Astro will be served on port 3001.
Build & Serve (NodeJs)
pnpm build
pnpm serve
TypeScript support
To fully utilize the type safe features, manually generate the types for PayloadCMS by runng pnpm generate:types
Then, you can import the types easily as simple as
import type { User } from "@turbopress/api/types";