Strapi y Astro
Strapi es un headless CMS de código abierto y personalizable.
Integración con Astro
Sección titulada Integración con AstroEsta guía creará una función wrapper para conectar Strapi con Astro.
Prerrequisitos
Sección titulada PrerrequisitosPara comenzar, necesitarás tener lo siguiente:
- Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te ayudará a poner en marcha en poco tiempo.
- Un servidor de Strapi CMS - Puedes configurar un servidor de Strapi en un entorno local.
Agregando la URL de Strapi en el archivo .env
.
Sección titulada Agregando la URL de Strapi en el archivo .env.Para agregar la 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:
Reinicia el servidor de desarrollo para utilizar esta variable de entorno en tu proyecto 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 la siguiente manera:
Ahora tu directorio raíz debería incluir el/los nuevos archivo(s):
Directorysrc/
- env.d.ts
- .env
- astro.config.mjs
- package.json
Creando el wrapper de la API
Sección titulada Creando el wrapper de la APICrea un nuevo archivo en src/lib/strapi.ts
y agrega la siguiente función envolvente para interactuar con la API de Strapi:
Esta función requiere un objeto con las siguientes propiedades:
endpoint
- El endpoint desde el cual estás obteniendo datos.query
- Los parámetros de consulta para agregar al final de la URL.wrappedByKey
- La clavedata
en el objeto que envuelve tuResponse
.wrappedByList
- Un parámetro para “desempaquetar” la lista devuelta por Strapi y devolver solo el primer elemento.
Opcional: Creando la interfaz Article
Sección titulada Opcional: Creando la interfaz ArticleSi estás utilizando TypeScript, crea la siguiente interfaz Article en el archivo src/interfaces/article.ts
para que coincida con los tipos de contenido de Strapi:
Puedes modificar esta interfaz o crear múltiples interfaces para que se correspondan con los datos de tu propio proyecto.
Directorysrc/
Directoryinterfaces/
- article.ts
Directorylib/
- strapi.ts
- env.d.ts
- .env
- astro.config.mjs
- package.json
Mostrando una lista de artículos
Sección titulada Mostrando una lista de artículos-
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. -
Importa la función wrapper y la interfaz. Agrega la siguiente llamada a la API para obtener tus artículos y devolver una lista:
La llamada a la API solicita datos desde
http://localhost:1337/api/articles
y devuelvearticles
: un array de objetos JSON que representan tus datos: -
Utilizando los datos del array
articles
devuelto por la API, muestra tus publicaciones de blog de Strapi en una lista. Estas publicaciones estarán vinculadas a sus propias páginas individuales, las cuales crearás en el siguiente paso.
Generando páginas de artículos.
Sección titulada Generando páginas de artículos.Crea el archivo src/pages/blog/[slug].astro
para generar dinámicamente una página para cada artículo.
Directorysrc/
Directoryinterfaces/
- article.ts
Directorylib/
- strapi.ts
Directorypages/
- index.astro
Directoryblog/
- [slug].astro
- env.d.ts
- .env
- astro.config.mjs
- package.json
Generación de sitios estáticos
Sección titulada Generación de sitios estáticosEn el modo estático predeterminado de Astro (SSG), utiliza getStaticPaths()
para obtener tu lista de artículos desde Strapi.
Crea la plantilla para cada página utilizando las propiedades de cada objeto de publicación.
Asegúrate de elegir el renderizado adecuado para tu contenido. Para Markdown, consulta nuestra guía de Markdown. Si estás representando HTML, consulta esta guía para asegurar la seguridad.
Renderizado en el lado del servidor
Sección titulada Renderizado en el lado del servidorSi has optado por el modo SSR (EN) con output: server
o output: hybrid
, genera tus rutas dinámicas utilizando el siguiente código:
Crea el archivo src/pages/blog/[slug].astro
:
Este archivo obtendrá y representará los datos de la página desde Strapi que coinciden 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
:
Si el artículo no se encuentra, el usuario será redirigido a esta página de error 404 y será recibido por un encantador gato.
Publicando tu sitio
Sección titulada Publicando tu sitioPara desplegar tu sitio web, visita nuestras guías de implementación y sigue las instrucciones para el proveedor de hosting que prefieras.
Volver a compilar en caso de cambios
Sección titulada Volver a compilar en caso de cambiosSi tu proyecto está utilizando el modo estático predeterminado de Astro, deberás configurar un webhook para desencadenar una nueva compilación cuando tu contenido cambie. Si estás utilizando Netlify o Vercel como proveedor de hosting, puedes utilizar su función de webhook para desencadenar una nueva compilación desde Strapi.
Netlify
Sección titulada NetlifyPara configurar un webhook en Netlify:
-
Ve al panel de control de tu sitio y haz clic en Build & deploy.
-
En la pestaña Continuous Deployment, encuentra la sección Build hooks y haz clic en Add build hook.
-
Proporciona un nombre para tu webhook y selecciona la rama en la que deseas desencadenar la compilación. Haz clic en Save y copia la URL generada.
Vercel
Sección titulada VercelPara configurar un webhook en Vercel:
-
Ve al panel de control de tu proyecto y haz clic en Settings.
-
En la pestaña Git, busca la sección Deploy Hooks.
-
Proporciona un nombre para tu webhook y la rama en la que deseas desencadenar la compilación. Haz clic en Add y copia la URL generada.
Agregando un webhook a Strapi
Sección titulada Agregando un webhook a StrapiSigue la guía de webhooks de Strapi para crear un webhook en tu panel de administración de Strapi.
Recursos oficiales
Sección titulada Recursos oficiales- Guía de Blog de Strapi para React por Strapi