These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

Why Use Astro 5?

Astro.js is a powerful web framework that offers several compelling reasons to use it for your web development projects. Here are the key benefits and reasons to choose Astro:

• Performance and Speed
• Flexibility and Developer Experience
• Content Focus
• SEO Benefits
• Server-Side Rendering and Static Site Generation

By choosing Astro, you get a modern, performant, and flexible framework that prioritizes content delivery and user experience, making it an excellent choice for a wide range of web development projects.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure. 2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration. 3. 100% TypeScript Support: Enjoy type safety & easy maintainability 4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 6. Editor interface: The editor allows you to pull in dynamic blocks of content. 7. Authentication: Secure and authorize access to your API with JWT or providers. 8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 9. i18n: Manage content in multiple languages. Easily query the different locales through the API. 10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

• Access Live Demo!

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip 

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Nice, now that we have our Strapi 5 server setup, we can start to setup our Astro 5 client.

Getting Started with Astro 5.

I will walk you through the steps to setup a new Astro 5 project. But here is the link to the Astro 5 Docs that I used for reference.

Astro 5 Installation and Initial Setup

Let's get started with Astro 5.

Make sure that you are in the root directory of your project and run the following command to install Astro 5.

npm create astro@latest

You will be asked Where should we create your new project?. I will install it in the client directory. Once you have entered your project name, press enter.

paul@Mac astro % npm create astro@latest

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
      ./client

We will go with the basic setup.

  tmpl   How would you like to start your new project?
         ● A basic, minimal starter (recommended)
         ○ Use blog template 
         ○ Use docs (Starlight) template 

Click yes for the remaining questions.

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with npm...

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

 next   Liftoff confirmed. Explore your project!

 Enter your project directory using cd ./client-temp 
 Run npm run dev to start the dev server. CTRL+C to stop.
 Add frameworks like react or tailwind using astro add.

 Stuck? Join us at https://astro.build/chat

╭──🎩─╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

Once everything is installed, you can start your Astro 5 project with the following command:

  cd client
  npm run dev

Your project should be running at http://localhost:4321.

Nice, now that we have our Astro 5 project setup, we can start to integrate it with our Strapi 5 server.

Building out our Astro 5 Project

Astro 5 uses a file based routing system. This means that you can create a new file in the src/pages folder and it will be automatically added to your project.

You can read more about it here.

But for today, we will be using the index.astro file in the src/pages folder.

Let's update the index.astro file with the following code:

1---
2// Import necessary components and utilities
3import Layout from '../layouts/Layout.astro';
4import { getCollection } from 'astro:content';
5
6// Fetch all posts from Strapi using Astro's content collection
7const strapiPosts = await getCollection("strapiPostsLoader");
8// Get Strapi URL from environment variables with fallback to localhost
9const BASE_URL = await import.meta.env.STRAPI_URL || "http://localhost:1337";
10
11// Helper function to handle media URLs from Strapi
12function getStrapiMedia(url: string | null) {
13  if (url == null) return null;
14  // Return as-is if it's a data URL (base64)
15  if (url.startsWith("data:")) return url;
16  // Return as-is if it's an absolute URL
17  if (url.startsWith("http") || url.startsWith("//")) return url;
18  // Prepend BASE_URL for relative URLs
19  return `${BASE_URL}${url}`;
20}
21---
22
23<Layout>
24  <div class="container mx-auto p-4">
25  <!-- Main heading -->
26	<h1 class="text-3xl font-bold mb-8">Hello Strapi 5 and Astro 5 World</h1>
27	<!-- Responsive grid layout using Tailwind CSS -->
28	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
29		{/* Map through posts and create article cards */}
30		{strapiPosts.map((post) => (
31			<article class="bg-white rounded-lg shadow-lg overflow-hidden">
32				{/* Post cover image */}
33				<img 
34					src={getStrapiMedia(post.data.cover.url)} 
35					alt={post.data.cover.alternativeText} 
36					class="w-full h-48 object-cover"
37				/>
38				{/* Post content container */}
39				<div class="p-4">
40					<h2 class="text-xl font-bold mb-2">{post.data.title}</h2>
41					<p class="text-gray-600 mb-4">{post.data.description}</p>
42					<div class="text-sm text-gray-500">
43						Published: {new Date(post.data.publishedAt).toLocaleDateString()}
44					</div>
45				</div>
46			</article>
47		))}
48	</div>
49</div>
50</Layout>

Brief Description: This is an Astro page component that displays a grid of blog posts fetched from a Strapi CMS.

The page features:

• Integration with Strapi CMS using Astro's content collections
• A responsive grid layout using Tailwind CSS (1 column on mobile, 2 on tablet, 4 on desktop)
• Article cards with cover images, titles, descriptions, and publication dates
• A utility function (getStrapiMedia) to handle different types of media URLs from Strapi
• Proper handling of environment variables for the Strapi backend URL

Adding Tailwind CSS to our Astro 5 Project

Notice that we are using Tailwind CSS in our project. Astro 5 uses the @astrojs/tailwind package.

You can read more about it here.

Let's add it to our project by running the following command:

  npx astro add tailwind

Astro will ask you a few questions, and then it will add the necessary files to your project.

Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────────────────────────────────╮
 │ npm install @astrojs/tailwind@^5.1.4 tailwindcss@^3.4.17  │
 ╰───────────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.mjs file.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ // @ts-check                                  │
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from '@astrojs/tailwind';     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/tailwind

Nice, now that we have Tailwind CSS added to our project, can start working on the most important part of our project, which is how to fetch our data from Strapi 5 via the Astro Content Loader API.

Fetching Data from Strapi 5 with Astro Content Loader API

In our index.astro file, you may have noticed that we are using the getCollection function to fetch our data from Strapi 5.

1const strapiPosts = await getCollection("strapiPostsLoader");

This is a custom function that Astro provides that allows you to fetch data via their Content Loader API.

So let's see how we can create a custom loader for our Strapi 5 data.

You can also read more about it here.

To make this work, we need to create a new file in the src folder called content.config.mjs.

This is where we will configure our custom loader.

Let's update the file with the following code:

1import { defineCollection, z } from "astro:content";
2import qs from "qs";
3
4// Define a custom content collection that loads data from Strapi
5const strapiPostsLoader = defineCollection({
6  // Async loader function that fetches data from Strapi API
7  loader: async () => {
8    // Get Strapi URL from environment variables or fallback to localhost
9    const BASE_URL = import.meta.env.STRAPI_URL || "http://localhost:1337";
10    const path = "/api/articles";
11    const url = new URL(path, BASE_URL);
12
13    // Build query parameters using qs to populate cover image data
14    url.search = qs.stringify({
15      populate: {
16        cover: {
17          fields: ["url", "alternativeText"],
18        },
19      },
20    });
21
22    // Fetch articles from Strapi
23    const articlesData = await fetch(url.href);
24    const { data }= await articlesData.json();
25
26    // Transform the API response into the desired data structure
27    return data.map((item) => ({
28      id: item.id.toString(),
29      title: item.title,
30      description: item.description,
31      slug: item.slug,
32      createdAt: item.createdAt,
33      updatedAt: item.updatedAt,
34      publishedAt: item.publishedAt,
35      cover: {
36        id: Number(item.cover.id),
37        documentId: item.cover.documentId,
38        url: item.cover.url,
39        alternativeText: item.cover.alternativeText,
40      }
41    }));
42  },
43  // Define the schema for type validation using Zod
44  schema: z.object({
45    id: z.string(),
46    title: z.string(),
47    description: z.string(),
48    slug: z.string(),
49    createdAt: z.string(),
50    updatedAt: z.string(),
51    publishedAt: z.string(),
52    cover: z.object({
53      id: z.number(),
54      documentId: z.string(),
55      url: z.string(),
56      alternativeText: z.string(),
57    }),
58  }),
59});
60
61// Export the collection for use in Astro pages
62export const collections = {
63  strapiPostsLoader,
64};

Brief Description: This configuration file sets up a content collection in Astro that integrates with a Strapi CMS backend. It: 1. Fetches article data from Strapi's API including cover images 2. Transforms the API response into a consistent data structure 3. Validates the data structure using Zod schema validation 4. Makes the data available throughout the Astro application via the getCollection() function 5. The loader can be used in Astro pages to fetch and display blog posts or articles stored in Strapi, with proper typing and validation. This creates a type-safe bridge between Strapi's headless CMS and Astro's static site generation.

Before this will work, we need to install the qs package and it's types, since we are using it to build our query string.

  npm i qs
  npm i @types/qs

Now restart your Astro 5 project and you should be able to see the data from Strapi 5 in your project.

Awesome, great job!

Github Project Repo

You can find the complete code for this project in the following Github repo.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and Astro.js documentation.