Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 5 minutos Iniciación
cheatsheet-astro

CheatSheet Astro

Astro es un framework web enfocado en la creación de sitios crear aplicaciones web y sitios estáticos.

Aprovecha la renderización en el lado del servidor (SSR) y la capacidad de utilizar múltiples frameworks de frontend como React, Vue y Svelte en un mismo proyecto.

Instalación y configuración inicial

Instalar Astro

Primero, asegúrate de tener Node.js instalado. Luego, instala Astro usando el CLI de npm.

npm create astro@latest

Crear un nuevo proyecto

Sigue las instrucciones para configurar el proyecto con un template o desde cero.

npm create astro@latest mi-proyecto

Estructura básica de un proyecto

La estructura básica de un proyecto Astro es:

/public           # Archivos estáticos
/src
  /components     # Componentes reutilizables
  /pages          # Páginas de la aplicación
  /layouts        # Diseños de página
  /styles         # Archivos de estilos
  /data           # Datos y contenido
astro.config.mjs  # Archivo de configuración

npm run dev

Inicia el servidor de desarrollo.

npm run build

Genera los archivos estáticos para producción.

npm run preview

Previsualiza el sitio de producción localmente.

Componentes Astro

Sintaxis de componentes

Un archivo .astro tiene una sección de frontmatter donde se puede importar código y definir variables.

---
const titulo = "Hola desde Astro";
---

<h1>{titulo}</h1>

Uso del componentes

Puedes usar componentes en tus páginas:

---
import MyComponent from '../components/MyComponent.astro';
---

<MyComponent name="Astro" />

Integración con frameworks

Astro soporta JSX, pero puede manejar múltiples frameworks. Aquí un ejemplo con React:

---
import MiComponente from '../components/MiComponente.jsx';
---
<MiComponente />

Props en componentes

Las propiedades pueden pasarse a los componentes,.

---
const { name } = Astro.props;
---

<h1>Hola, {name}!</h1>
<Saludo name="Ingeniero" />

Estilos en Astro

Añadir estilos locales

Astro permite agregar estilos CSS locales dentro del archivo .astro.

<style>
  h1 {
    color: blue;
  }
</style>
<h1>Hola desde Astro</h1>

Estilos globales

Para añadir estilos globales, se pueden importar archivos CSS en el astro.config.mjs o en el layout principal.

import './src/styles/global.css';

Scripts en Astro

Agregar scripts a tu proyecto

Astro te permite controlar cómo y cuándo cargar scripts de JavaScript para optimizar el rendimiento.

<script src="/mi-script.js" />

Script diferido

Para cargar scripts de manera diferida y mejorar la performance:

<script src="/mi-script.js" defer />

Layouts

Crear un layout base

Los layouts se pueden definir para compartir estructura entre múltiples páginas.

---
const { title } = Astro.props;
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Luego, en una página:

---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Página de inicio">
  <h1>Bienvenidos a Astro</h1>
</BaseLayout>

Rutas en Astro

Creación de rutas

Astro genera rutas automáticamente según la estructura de archivos dentro de src/pages.

  • src/pages/index.astro → /
  • src/pages/about.astro → /about

Parámetros de ruta

Se pueden crear rutas dinámicas usando corchetes.

src/pages/[id].astro
---
export async function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } }
  ];
}
const { id } = Astro.props;
---
<h1>ID: {id}</h1>

Fetching de datos

Cargar datos en tiempo de construcción

Astro permite cargar datos estáticos durante la construcción del sitio.

---
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

const { data } = Astro.props;
---

<ul>
  {data.map(item => (
    <li>{item.name}</li>
  ))}
</ul>

Cargar datos en tiempo de ejecución

También se pueden cargar datos en tiempo real desde el cliente.

<script>
  async function loadData() {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  }
</script>

Deployment

Build para producción

Para compilar el proyecto en un sitio estático listo para producción.

npm run build

Deploy

Astro se integra fácilmente con servicios como Vercel o Netlify. Solo necesitas conectar tu repositorio y estos servicios se encargarán del resto.

vercel deploy

Plugins en Astro

Instalación de plugins

Astro permite extender sus funcionalidades con plugins. Por ejemplo, puedes agregar soporte para Tailwind CSS.

npm install @astro/tailwind

Configura el plugin en astro.config.mjs.

import tailwind from '@astro/tailwind';

export default {
  integrations: [tailwind()],
}

Integración con APIs y SSR

Configuración de SSR

Astro también soporta renderizado en el servidor para mejorar la dinámica de las aplicaciones.

// astro.config.mjs
export default {
  output: 'server',
};

Llamar APIs desde el servidor

En el contexto de SSR, puedes hacer llamadas a APIs en el servidor sin exponer la lógica al cliente.

---
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---

En esta página