Intro
Cuando creamos un proyecto con Astro y queremos integrarlo con Content Island, siempre hay una serie de pasos iniciales que tenemos que repetir: instalar dependencias, configurar la conexión con Content Island, preparar las variables de entorno…
Como es una tarea bastante repetitiva, nos hicimos una pregunta muy simple: ¿por qué no crear una plantilla que haga todo esto por nosotros? Y de ahí nace la plantilla mínima de Astro para Content Island.
En este post vamos a ver cómo funciona y qué incluyem , si lo prefieres en formato video, aquí lo tienes...
Pasos creación
Lo primero es crear un proyecto nuevo de Astro.
Lo llamamos "demo"
En lugar de empezar desde cero, seleccionamos la opción de crear el proyecto a partir de una plantilla.
Elegimos la plantilla Minimal Astro.
Copiamos el comando que tenemos en la pestaña de Quick start
VSCode
Ahora nos vamos a Visual Studio Code. En mi caso, lo tengo abierta una carpeta vacía, y desde el terminal simplemente pego el comando que acabamos de copiar.
Al ejecutarlo, se lanza el CLI de Content Island, que nos va a hacer unas cuantas preguntas muy sencillas:
- Primero, confirmamos que queremos ejecutar el CLI.
- Como ya estamos dentro de una carpeta vacía, indicamos que el destino del proyecto va a ser "." (Si no, aquí podríamos indicar el nombre de la carpeta).
- Y por último, le decimos que haga un npm install automáticamente por nosotros.
Solo nos queda ejecutar npm run dev, que levanta el servidor de desarrollo de Astro, copiamos la dirección y ya tenemos funcionando un proyecto mínimo de Astro integrado con Content Island.
Que trae la librería
Ahora, veamos qué trae exactamente este proyecto:
La librería de la API de Content Island ya instalada y configurada. package.json y lib
El token de acceso, preparado como variable de entorno. .env y astro.config.mjs
Un ejemplo básico de cómo usar la librería desde un componente Astro.
api y pod/component
- Prettier configurado, incluyendo soporte para archivos Astro.
.prettierrc
- Y alias a las carpetas principales, para que los imports sean más claros y sencillos.
tsconfig.json
A partir de aquí, el siguiente paso ya es cosa tuya: definir tu contenido en Content Island y empezar a construir tu proyecto Astro directamente desde Visual Studio Code, sin perder tiempo en la configuración inicial.