BCMS Recipes Astro Starter

The BCMS Recipes code starter for Astro.js is a boilerplate that pairs an Astro 6 website with the BCMS headless CMS, providing a pre-structured codebase for a recipe site that you can extend and scale.

What is the BCMS Recipes starter for Astro.js?

It is a minimal starter kit that wires an Astro.js front end directly to a BCMS project, so content you manage in BCMS is available to your site. The starter is created and maintained by the BCMS team and is part of their collection of starters for frameworks like Astro, Gatsby, Next.js, and Nuxt. Running the command npx @thebcms/cli create astro starter recipes scaffolds a new project with the recipes template, and the resulting site is built and tested against Astro 6.

Key Features

• Clean and minimal codebase — The starter offers a small, readable structure that hooks directly into your BCMS project, avoiding unnecessary abstractions.
• Astro 6 compatibility — It is built and tested against Astro 6.x, so you start on a current version of the framework.
• BCMS headless CMS integration — Content models and entries created in BCMS are fetched and rendered through the starter’s data layer.
• Single-command scaffolding — Use npx @thebcms/cli create astro starter recipes and follow the interactive prompts to set up your project.
• Recipe website structure — The template includes the basic pages and components needed for a food and recipe site, ready to be customized.
• Documentation and integration links — The README points to BCMS documentation and an Astro integration guide, helping you understand how the two connect.

Who is it for?

• Developers building recipe sites — Get a pre-wired Astro and BCMS setup so you can focus on design and content instead of plumbing.
• Teams already using BCMS — Use the starter as a template for content-driven sites, with the CMS connection already handled.
• Agencies and freelancers — Deliver a scalable website for culinary clients quickly by starting from this clean codebase.

What can you do with it?

• Create a new project — Run the CLI command and follow the prompts to generate a local Astro project connected to your BCMS project.
• Manage content in BCMS — Update recipes in the BCMS dashboard and have the changes appear on the Astro site.
• Extend the codebase — Add new pages, components, and content models on top of the minimal starting structure.

How does it work?

The starter is scaffolded by the BCMS CLI. After you run npx @thebcms/cli create astro starter recipes, the CLI prompts you for details about your BCMS project and generates a local Astro site configured to pull content from that project. The clean structure lets you then add your own recipe content and extend the site as needed.

FAQ

What are the requirements to use this starter?

You need Node.js 22 or newer, npm 10 or newer, and Astro 6. The starter is built and tested against Astro 6, so it may not work with older Astro versions.

How do I create a new project with this starter?

Run the command npx @thebcms/cli create astro starter recipes and follow the prompts. The CLI will scaffold the project for you.

Does this starter work with other frameworks?

No, this specific starter is for Astro. BCMS provides separate starters for Gatsby, Next.js, and Nuxt, as indicated in the repository topics.

Where can I find documentation?

The README includes links to the BCMS website, documentation, the Astro integration guide, all BCMS starters, and a Discord community.