astro-payload-template
Astro frontend wired to a Payload CMS backend with a lightweight live preview approach
Astro frontend and Payload CMS with MongoDB, run in Docker and deployed through GitHub Actions
Astroad sets up a static Astro frontend alongside Payload CMS and MongoDB, all running in Docker containers for local development. Deployment is handled by GitHub Actions workflows that connect to a server over SSH and run the production script behind a Traefik reverse proxy. Content changes in Payload trigger a webhook that rebuilds the static Astro site. Requires Docker, Node.js and Yarn.
A pre-configured setup for easy website development with Astro and Payload CMS using Docker.
This repository is a GitHub template: create your own copy of it in one click.
Create a repository from this templateAstroad is a pre-configured setup for Astro and Payloadcms, designed to make it easy for you to start building your website. With Astroad, you'll have a complete development environment that you can run locally using Docker. This setup simplifies the testing and development of your website before deploying it to a production environment.
Before getting started with Astroad, make sure you have the necessary software installed:
While there's no configuration necessary for local development, deployment via Github Workflows requires specific secrets and variables to be set.
USER: User on the serverHOST: IP or URL of the serverKEY: SSH KEY for connecting to the serverMONGODB_PW: Password for MongoDBMONGODB_USER: User for MongoDBPATH: Path where the repository resides on the serverPAYLOAD_PORT: Port at which Payload listensPAYLOAD_SECRET: String to encrypt Payload dataTOKEN: Github Access Token for the webhook to trigger the payload.yml workflow and execute a new Astro buildASTRO_HOST: Hostdomain of the FrontendPAYLOAD_HOST: Hostdomain of the CMSPAYLOAD_URL: URL of the CMSNAME: Name of the Container and ProjectPlease remember to set these secrets and variables in your repository settings to ensure a successful deployment through Github Workflows.
Once the secrets and variables are set on GitHub, they will replace the existing ones in the .env file on the server during deployment. This is done by the push.yml workflow, which replaces the placeholders in the .env with the actual secrets and variables defined in the repository settings. Please ensure that the names of your secrets and variables match with the placeholders in the .env file.
To get started with Astroad, you'll need to have Docker and NPM || Yarn || PNPM installed on your machine.
You have two options for getting the repository:
Once you've cloned the repository or created your own from the template, follow these steps:
cd {newName}yarn devThis will start up the Astro, Payloadcms and Mongo containers and make them available on your local machine. Astro will be served at http://localhost:3000 and the Payload will be available at http://localhost:3001.
The docker-compose.yml and docker-compose-dev.yml files includes everything you need to run the containers. The containers use the environment variables declared in the .env file and mounted volumes to store data persistently even after the containers are stopped and started.
Deployment is handled by a Github Actions Workflow on every push. It logs into the server via SSH, pulls or clones the latest version of the repository, and runs yarn prod.
Because Astro is completely static, a content change in the CMS must trigger a new build of Astro. Therefore, there’s a payload.yml workflow that gets triggered by a webhook after every content change from Payload.
Ensure you have Traefik set up as a reverse proxy before deployment. The prod script will launch your site in a production-ready environment.
Astro frontend wired to a Payload CMS backend with a lightweight live preview approach
Turborepo monorepo running Payload 3 with Next.js, Astro and Svelte frontends

Minimal Payload starter with Next.js, MongoDB, a Users auth collection and a Media upload collection