Strapi & Astro
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Strapi is an open-source, customizable, headless CMS.
Integrating with AstroSection titled Integrating with Astro
This guide will build a wrapper function to connect Strapi with Astro.
PrerequisitesSection titled Prerequisites
To get started, you will need to have the following:
- An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
- A Strapi CMS server - You can set up a Strapi server on a local environment.
Adding the Strapi URL in Section titled Adding the Strapi URL in .env
To add your Strapi URL to Astro, create a
.env file in the root of your project (if one does not already exist) and add the following variable:
Now, you can use this environment variable in your Astro project.
If you would like to have IntelliSense for your environment variable, you can create a
env.d.ts file in the
src/ directory and configure
ImportMetaEnv like this:
Your root directory should now include the new file(s):
Creating the API wrapperSection titled Creating the API wrapper
Create a new file at
lib/strapi.ts and add the following wrapper function to interact with the Strapi API:
This function requires an object with the following properties:
endpoint- The enpoint you are fetching.
query- The query parameters to add to the end of URL
datakey in the object that wraps your
wrappedByList- A parameter to “unwrap” the list returned by Strapi, and return only the first item.
Optional: Creating the Article interfaceSection titled Optional: Creating the Article interface
If you are using TypeScript, create the following Article interface to correspond to the Strapi content types at
Displaying a list of articlesSection titled Displaying a list of articles
Update your home page
src/pages/index.astroto display a list of blog posts, each with a description and a link to its own page.
Import the wrapper function and the interface. Add the following API call to fetch your articles and return a list:
The API call requests data from
http://localhost:1337/api/articles and returns
articles: an array of json objects representing your data:
- Using data from the
articlesarray returned by the API, display your Strapi blog posts in a list. These posts will link to their own individual pages, which you will create in the next step.
Generating article pagesSection titled Generating article pages
Create the file
src/pages/blog/[slug].astro to dynamically generate a page for each article.
Static site generationSection titled Static site generation
In Astro’s default static mode (SSG), use
getStaticPaths() to fetch your list of articles from Strapi.
Create the template for each page using the properties of each post object.
Server-side renderingSection titled Server-side rendering
This file will fetch and render the page data from Strapi that matches the dynamic
Since you are using a redirect to
/404, create a 404 page in
If the article is not found, the user will be redirected to this 404 page and be greeted by a lovely cat.
Publishing your siteSection titled Publishing your site
To deploy your website, visit our deployment guides and follow the instructions for your preferred hosting provider.
Rebuild on changesSection titled Rebuild on changes
If your project is using Astro’s default static mode, you will need to set up a webhook to trigger a new build when your content changes. If you are using Netlify or Vercel as your hosting provider, you can use its webhook feature to trigger a new build from Strapi.
NetlifySection titled Netlify
To set up a webhook in Netlify:
Go to your site dashboard and click on Build & deploy.
Under the Continuous Deployment tab, find the Build hooks section and click on Add build hook.
Provide a name for your webhook and select the branch you want to trigger the build on. Click on Save and copy the generated URL.
VercelSection titled Vercel
To set up a webhook in Vercel:
Go to your project dashboard and click on Settings.
Under the Git tab, find the Deploy Hooks section.
Provide a name for your webhook and the branch you want to trigger the build on. Click Add and copy the generated URL.
Adding a webhook to StrapiSection titled Adding a webhook to Strapi
Follow the Strapi webhooks guide to create a webhook in your Strapi admin panel.
Official ResourcesSection titled Official Resources
- Strapi Blog Guide For React by Strapi