Could you use Astro with the Strapi CMS?

[narrow mountain]

Could you use Astro with the Strapi CMS? I notice that it's not listed in the documentation.

Could you use Astro with the Strapi CMS?

[solid shell]

I use it via the Strapi API.

const postLink =
        siteConfig.cmsHost +
        '/api/blogs?sort=Posted:desc&pagination[pageSize]=100&populate[0]=Author&populate[1]=Author.Headshot&populate[2]=Author.Headshot.Image&populate[3]=Image';
    const jwtHeader = 'Bearer ' + import.meta.env.CMS_API_KEY;

    let response = await axios({
        url: postLink,
        method: 'get',
        headers: { Authorization: jwtHeader }
    });

    const posts: [ApiBlogBlog] = response?.data?.data;

You could also use fetch instead of Axios

[narrow mountain]

Thanks @solid shell !

[pastel harbor]

How do you handle assets from CMS ?

I try the api, and strapi give me 4 formats with url like uploads/large_hero_gaad_ftkfctoehiye_largetall_2x_c27bc62538.png, but it seems not able to build for the static output.

Did I miss something ?

[solid shell]

Just so I understand, you’re saying that images from the CMS that you are using do not get downloaded and served from your _dist folder?

[pastel harbor]

yes, because the relative path is about strapi not for output folder of astro.

[solid shell]

Yeah I had the same issue, I created a component that takes the strapi images url, downloads it to the /public folder and then returns and <img element with the src= the new image path that was created in the public folder

if you use the astro <Picture /> or <Image /> it will handle all that for you, but it does not do SVG's, so that's why I built all of that out.

You can take a look at my component, but it's a bit more going on, I have caching for the images from the strapi cms, and i customized the path the images get saved on my strapi db.