Saltar al contenido principal

Astro

Nuevo proyecto​

bun create astro@latest
bun dev

Actualizaciones​

bunx @astrojs/upgrade
#bun x @astrojs/upgrade

# Alternativa
bun x npm-check-updates
bun x npm-check-updates -u

Integraciones​

Ver integraciones disponibles

bun astro add --help
npx astro add --help

Ej. Agregando TailwindCSS

bun astro add tailwind
npx astro add tailwind

Algunas notas y configuraciones​

  • Editar README.md
  • Editar layout principal; como el idioma de la página y los títulos
  • Configurar ruta de las importaciones de TS
tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  // -------------------------------------
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  // -------------------------------------
}

Estructura proyecto​

  • Por defecto Astro no envía JS al cliente y todo es estático
  • Para darle funcionalidad a algún componente o isla, requiere la directiva client:*
  • astro.config.mjs contiene las configuraciones del proyecto Astro, como las integraciones, el tipo de renderizado, etc.
  • src/env.d.ts contiene variables o información global

Carpetas reservadas​

  • public/*, para contenido estático que no será optimizado por Astro, ej. fuentes, imágenes, svg, etc.
  • src/* los archivos en esta carpeta Astro los puede optimizar o minificar (CSS, imágenes, etc.)
  • src/pages/, cualquier .md, .mdx, .html, .astro o subcarpeta/+ se convierte en una página o ruta. Si el archivo es .js o .ts puede funcionar como una API endpoint.
  • src/content/ para colecciones
  • src/actions/ para funciones del servidor