Prepr CMS & Astro

This content is not available in your language yet.

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:

PREPR_ENDPOINT=YOUR_PREPR_API_URL

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

Go to Settings > Access tokens to view both your Preview and Production access tokens.
Use the API URL value from the GraphQL Production access token to only retrieve published content items for your Astro site.

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:

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:

Folderlib/
- prepr.js
Foldersrc/
- …
.env
astro.config.mjs
package.json

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:

Create a new folder src/queries/ and add a file named get-articles.js.

Add the following query to this file to retrieve all articles:

const GetArticles = `
query {
    Articles {
      items {
        _id
        _slug
        title
    }
  }
}
`
export default GetArticles

To display a linked list of your blog posts on a page, import and execute your query, including the necessary Prepr endpoint. You will then have access to all your posts titles and their slugs to render to the page. (In the next step, you will create individual pages for your blog posts.)

---
import Layout from '../layouts/Layout.astro';
import { Prepr } from '../lib/prepr.js';
import GetArticles from '../queries/get-articles.js';

const response = await Prepr(GetArticles)
const { data } = await response.json()
const articles = data.Articles
---

<Layout title="My blog site">
  <h1>
    My blog site
  </h1>
  <ul>
    {
      articles.items.map((post) => (
        <li>
          <a href={post._slug}>{post.title}</a>
        </li>
      ))
    }
  </ul>
</Layout>

Your root directory should include these new files:

Folderlib/
- prepr.js
- Folderqueries /
  - get-articles.js
Foldersrc/
- …
.env
astro.config.mjs
package.json

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.

Create a file called get-article-by-slug.js in the queries folder and add the following to query a specific article by its slug and return data such as the article title and content:

const GetArticleBySlug = `
query ($slug: String) {
   Article (slug: $slug) {
     _id
     title
     content {
       __typename
       ... on Text {
         body
         text
       }
       ... on Assets {
         items {
           url
         }
       }
     }
   }
}`

export default GetArticleBySlug

Inside the src/pages folder, create a file called […slug].astro. Add the following code to import and execute the query from the previous step and display the retrieved article:

---
import Layout from '../layouts/Layout.astro';
import {Prepr} from '../lib/prepr.js';
import GetArticleBySlug from '../queries/get-article-by-slug.js';

const { slug } = Astro.params;
const response = await Prepr(GetArticleBySlug, {slug})
const { data } = await response.json()
const article = data.Article
---

<Layout title={article.title}>
  <main>
    <h1>{article.title}</h1>
    {
      article.content.map((content) => (
        <div>
          {
            content.__typename === "Assets" &&
            <img src={content.items[0].url} width="300" height="250"/>
          }
          {
            content.__typename === 'Text' &&
            <div set:html={content.body}></div>
          }
        </div>
      ))
    }
  </main>
</Layout>

Your root directory should now include these new files:

Folderlib/
- prepr.js
- Folderqueries/
  - get-articles.js
  - get-article-by-slug.js
Foldersrc/
- Folderpages/
  - index.astro
  - […slug].astro
.env
astro.config.mjs
package.json

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.