Prepr CMS & Astro

Prepr CMS is a headless CMS with built-in personalization.

Integrating with Astro

Prepr CMS provides a GraphQL API to connect your data to Astro.

Prerequisites

To get started, you will need the following:

• A new or existing Astro project configured for on-demand rendering.
• A free Prepr account
• A Prepr environment with existing blog posts. These posts must include a title and content. Other fields are optional.

Setting up credentials

To add the Prepr endpoint to your Astro project, create a .env file in the root of your project if one does not already exist and add the following variable:

.env

PREPR_ENDPOINT=YOUR_PREPR_API_URL

You will find your YOUR_PREPR_API_URL value from your Prepr account settings:

Configuring the Prepr endpoint

Create a new folder src/lib/ and add a new file called prepr.js. This is where you will configure the Prepr endpoint. Add the following code to fetch your data from Prepr CMS:

src/lib/prepr.js

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}

Your root directory should now include these files:

Fetching data

You will fetch your data from Prepr by writing queries to interact with its GraphQL API.

Create a GraphQL query to retrieve your blog articles:

Your root directory should include these new files:

Creating individual blog post pages

To create a page for each blog post, you will execute a new GraphQL query on a dynamic routing .astro page. This query will fetch a specific article by its slug and a new page will be created for each individual blog post.

Your root directory should now include these new files:

Now, when you click an article link from the main list of blog posts, you will be taken to a page with its individual content.

Publishing your site

To deploy your Prepr blog, visit our deployment guides and follow the instructions for your preferred hosting provider.

Official Resources

• Follow the Prepr CMS Astro quickstart guide to make a simple blog with Astro and Prepr CMS. 
• Check out the Connecting Prepr CMS to Astro for an overview of Astro and Prepr CMS resources.