Strapi & Astro

Strapi es un CMS headless, personalizable y de código abierto.

Integración con Astro

Esta guía construirá una función wrapper para conectar Strapi con Astro.

Requisitos previos

Para empezar, necesitarás lo siguiente:

1. Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
2. Un servidor de Strapi CMS - Puedes configurar un servidor de Strapi en un entorno local.

Agregar la URL de Strapi en .env

Para agregar tu URL de Strapi a Astro, crea un archivo .env en la raíz de tu proyecto (si aún no existe) y agrega la siguiente variable:

.env

STRAPI_URL="http://127.0.0.1:1337" # or use your IP address

Reinicia el servidor de desarrollo para usar esta variable de entorno en tu proyecto de Astro.

Si deseas tener IntelliSense para tu variable de entorno, puedes crear un archivo env.d.ts en el directorio src/ y configurar ImportMetaEnv de esta manera:

src/env.d.ts

interface ImportMetaEnv {
  readonly STRAPI_URL: string;
}

Tu directorio raíz ahora debería incluir los nuevos archivos:

• Directoriosrc/

  • env.d.ts
• .env
• astro.config.mjs
• package.json

Aprende más sobre las variables de entorno y los archivos .env en Astro.

Creación del wrapper de la API

Crea un nuevo archivo en src/lib/strapi.ts y agrega la siguiente función wrapper para interactuar con la API de Strapi:

src/lib/strapi.ts

interface Props {
  endpoint: string;
  query?: Record<string, string>;
  wrappedByKey?: string;
  wrappedByList?: boolean;
}

/**
 * Fetches data from the Strapi API
 * @param endpoint - The endpoint to fetch from
 * @param query - The query parameters to add to the url
 * @param wrappedByKey - The key to unwrap the response from
 * @param wrappedByList - If the response is a list, unwrap it
 * @returns
 */
export default async function fetchApi<T>({
  endpoint,
  query,
  wrappedByKey,
  wrappedByList,
}: Props): Promise<T> {
  if (endpoint.startsWith('/')) {
    endpoint = endpoint.slice(1);
  }

  const url = new URL(`${import.meta.env.STRAPI_URL}/api/${endpoint}`);

  if (query) {
    Object.entries(query).forEach(([key, value]) => {
      url.searchParams.append(key, value);
    });
  }
  const res = await fetch(url.toString());
  let data = await res.json();

  if (wrappedByKey) {
    data = data[wrappedByKey];
  }

  if (wrappedByList) {
    data = data[0];
  }

  return data as T;
}

Esta función requiere un objeto con las siguientes propiedades:

1. endpoint - El endpoint que estás consultando.
2. query - Los parámetros de consulta para agregar al final de la URL
3. wrappedByKey - La clave data en el objeto que envuelve tu Response.
4. wrappedByList - Un parámetro para "desenvolver" la lista devuelta por Strapi y devolver solo el primer elemento.

Opcional: Creación de la interfaz de Article

Si estás utilizando TypeScript, crea la siguiente interfaz de Article para corresponder con los tipos de contenido de Strapi en src/interfaces/article.ts:

src/interfaces/article.ts

export default interface Article {
  documentId: number;
  title: string;
  description: string;
  content: string;
  slug: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
}

Nota

Puedes modificar esta interfaz, o crear múltiples interfaces, para que correspondan a los datos de tu propio proyecto.

• Directoriosrc/

  • Directoriointerfaces/

    • article.ts
  • Directoriolib/

    • strapi.ts
  • env.d.ts
• .env
• astro.config.mjs
• package.json

Mostrar una lista de artículos

1. Actualiza tu página de inicio src/pages/index.astro para mostrar una lista de publicaciones de blog, cada una con una descripción y un enlace a su propia página.

2. Importa la función wrapper y la interfaz. Agrega la siguiente llamada a la API para obtener tus artículos y devolver una lista:

   src/pages/index.astro

   ---
   import fetchApi from '../lib/strapi';
   import type Article from '../interfaces/article';
   
   const articles = await fetchApi<Article[]>({
     endpoint: 'articles', // the content type to fetch
     wrappedByKey: 'data', // the key to unwrap the response
   });
   ---

   La llamada a la API solicita datos de http://localhost:1337/api/articles y devuelve articles: un array de objetos JSON que representan tus datos:

   [
     {
       documentId: 1,
       title: "What's inside a Black Hole",
       description: "Maybe the answer is in this article, or not...",
       content: "Well, we don't know yet...",
       slug: "what-s-inside-a-black-hole",
       createdAt: "2023-05-28T13:19:46.421Z",
       updatedAt: "2023-05-28T13:19:46.421Z",
       publishedAt: "2023-05-28T13:19:45.826Z"
     },
     // ...
   ]

3. Utilizando los datos del array articles devuelto por la API, muestra tus publicaciones de blog de Strapi en una lista. Estas publicaciones se enlazarán a sus propias páginas individuales, las cuales crearás en el siguiente paso.

   src/pages/index.astro

   ---
   import fetchApi from '../lib/strapi';
   import type Article from '../interfaces/article';
   
   const articles = await fetchApi<Article[]>({
     endpoint: 'articles?populate=image',
     wrappedByKey: 'data',
   });
   ---
   
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <title>Strapi & Astro</title>
     </head>
   
     <body>
       <main>
         <ul>
           {
             articles.map((article) => (
               <li>
                 <a href={`/blog/${article.slug}/`}>
                   {article.title}
                 </a>
               </li>
             ))
           }
         </ul>
       </main>
     </body>
   </html>

Generación de páginas de artículos

Crea el archivo src/pages/blog/[slug].astro para generar dinámicamente una página para cada artículo.

• Directoriosrc/

  • Directoriointerfaces/

    • article.ts
  • Directoriolib/

    • strapi.ts
  • Directoriopages/

    • index.astro
    • Directorioblog/

      • [slug].astro
  • env.d.ts
• .env
• astro.config.mjs
• package.json

Generación de sitios estáticos

En el modo estático predeterminado de Astro (SSG), utiliza getStaticPaths() para obtener tu lista de artículos desde Strapi.

src/pages/blog/[slug].astro

---
import fetchApi from '../../lib/strapi';
import type Article from '../../interfaces/article';

export async function getStaticPaths() {
  const articles = await fetchApi<Article[]>({
    endpoint: 'articles',
    wrappedByKey: 'data',
  });

  return articles.map((article) => ({
    params: { slug: article.slug },
    props: article,
  }));
}
type Props = Article;

const article = Astro.props;
---

Crea la plantilla para cada página utilizando las propiedades de cada objeto de publicación.

src/pages/blog/[slug].astro

---
import fetchApi from '../../lib/strapi';
import type Article from '../../interfaces/article';

export async function getStaticPaths() {
  const articles = await fetchApi<Article[]>({
    endpoint: 'articles',
    wrappedByKey: 'data',
  });

  return articles.map((article) => ({
    params: { slug: article.slug },
    props: article,
  }));
}
type Props = Article;

const article = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{article.title}</title>
  </head>

  <body>
    <main>
      <img src={import.meta.env.STRAPI_URL + article.image.data.url} />

      <h1>{article.title}</h1>

      <!-- Render plain text -->
      <p>{article.content}</p>
      <!-- Render markdown -->
      <MyMarkdownComponent>
        {article.content}
      </MyMarkdownComponent>
      <!-- Render html -->
      <Fragment set:html={article.content} />
    </main>
  </body>
</html>

Consejo

Asegúrate de elegir el renderizado correcto para tu contenido. Para markdown, consulta nuestra guía de markdown. Si estás renderizando html, consulta esta guía por seguridad.

Renderizado bajo demanda

Si has optado por el renderizado bajo demanda con un adaptador, genera tus rutas dinámicas utilizando el siguiente código:

Crea el archivo src/pages/blog/[slug].astro:

src/pages/blog/[slug].astro

---
import fetchApi from '../../../lib/strapi';
import type Article from '../../../interfaces/article';

const { slug } = Astro.params;

let article: Article;

try {
  article = await fetchApi<Article>({
    endpoint: 'articles',
    wrappedByKey: 'data',
    wrappedByList: true,
    query: {
      'filters[slug][$eq]': slug || '',
    },
  });
} catch (error) {
  return Astro.redirect('/404');
}
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{article.title}</title>
  </head>

  <body>
    <main>
      <img src={import.meta.env.STRAPI_URL + article.image.data.url} />

      <h1>{article.title}</h1>

      <!-- Render plain text -->
      <p>{article.content}</p>
      <!-- Render markdown -->
      <MyMarkdownComponent>
        {article.content}
      </MyMarkdownComponent>
      <!-- Render html -->
      <Fragment set:html={article.content} />
    </main>
  </body>
</html>

Este archivo recuperará y renderizará los datos de la página desde Strapi que coincidan con el parámetro dinámico slug.

Dado que estás utilizando una redirección a /404, crea una página 404 en src/pages:

src/pages/404.astro

<html lang="en">
  <head>
    <title>Not found</title>
  </head>
  <body>
    <p>Sorry, this page does not exist.</p>
    <img src="https://http.cat/404" />
  </body>
</html>

Si no se encuentra el artículo, el usuario será redirigido a esta página 404 y será recibido por un lindo gato.

Publicando tu sitio

Para desplegar tu sitio web, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Recompilar al realizar cambios

Si tu proyecto está utilizando el modo estático predeterminado de Astro, deberás configurar un webhook para activar una nueva compilación cuando cambie tu contenido. Si estás utilizando Netlify o Vercel como tu proveedor de alojamiento, puedes utilizar su función de webhook para activar una nueva compilación desde Strapi.

Netlify

Para configurar un webhook en Netlify:

1. Ve al panel de control de tu sitio y haz clic en Build & deploy.

2. En la pestaña Continuous Deployment, busca la sección Build hooks y haz clic en Add build hook.

3. Proporciona un nombre para tu webhook y selecciona la rama en la que deseas activar la compilación. Haz clic en Save y copia la URL generada.

Vercel

Para configurar un webhook en Vercel:

1. Ve al panel de control de tu proyecto y haz clic en Settings.

2. En la pestaña Git, busca la sección Deploy Hooks.

3. Proporciona un nombre para tu webhook y la rama en la que deseas activar la compilación. Haz clic en Add y copia la URL generada.

Agregar un webhook a Strapi

Sigue la guía de webhooks de Strapi para crear un webhook en tu panel de administración de Strapi.

Recursos oficiales

• Guía del blog de Strapi para React por Strapi

Más guías de CMS

Socios de CMS destacados

• 

  CloudCannon

  CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

• 

  ApostropheCMS

• 

  Builder.io

• 

  ButterCMS

• 

  Caisy

• 

  CloudCannon

• 

  Contentful

• 

  Cosmic

• 

  Craft CMS

• 

  Craft Cross CMS

• 

  Crystallize

• 

  DatoCMS

• 

  Decap CMS

• 

  Directus

• 

  Drupal

• 

  Flotiq

• 

  Front Matter CMS

• 

  Ghost

• 

  GitCMS

• 

  Hashnode

• 

  Hygraph

• 

  JekyllPad

• 

  Keystatic

• 

  KeystoneJS

• 

  Kontent.ai

• 

  microCMS

• 

  Optimizely CMS

• 

  Pages CMS

• 

  Payload CMS

• 

  Prepr CMS

• 

  Prismic

• 

  Sanity

• 

  Sitecore XM

• 

  Sitepins

• 

  Spinal

• 

  Statamic

• 

  Storyblok

• 

  Strapi

• 

  StudioCMS

• 

  TinaCMS

• 

  Umbraco

• 

  Vault CMS

• 

  Wordpress

• 

  Zero