title | description | type | service | stub | i18nReady |
---|---|---|---|---|---|
Prepr CMS & Astro |
Add content to your Astro project using Prepr as a CMS |
cms |
Prepr CMS |
true |
true |
import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
Prepr CMS is a headless CMS with built-in personalization.
Prepr CMS provides a GraphQL API to connect your data to Astro.
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
andcontent
. Other fields are optional.
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:
- Use the API URL value from the GraphQL Production access token to only retrieve published content items for your Astro site.
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:
- lib/ - **prepr.js** - src/ - **.env** - astro.config.mjs - package.jsonYou will fetch your data from Prepr by writing queries to interact with its GraphQL API.
1. 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:
- lib/ - prepr.js - **queries**/ - **get-articles.js** - src/ - .env - astro.config.mjs - package.jsonTo 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.
export default GetArticleBySlug
```
:::tip
You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr.
The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field).
:::
- 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:
- lib/ - prepr.js - queries/ - get-articles.js - **get-article-by-slug.js** - src/ - pages/ - index.astro - **[…slug].astro** - .env - astro.config.mjs - package.jsonNow, when you click an article link from the main list of blog posts, you will be taken to a page with its individual content.
To deploy your Prepr blog, visit our deployment guides and follow the instructions for your preferred hosting provider.
- 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.