¿Qué es Astro y cómo empezar?

¡Hola!

La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯

Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.

¿Pero qué es?

Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”

Puedes leer con más detalles en la introducción a Astro.

Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.

Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.

Por ejemplo:

  • Todo.jsx
  • Todo.vue
  • Todo.svelte

Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔

Iniciar un proyecto con Astro

⚠️ Importante

La versión mínima de Node.js que se requiere es la 14.15.1.

# Inicializamos Astro 
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start

Uso

Estructura básica recomendada:

├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json

Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo .astro.

Así es como se ve un archivo .astro

---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Astro</title>
 </head>
 <body>
   <header>
     <!-- Colocamo nuestro componente Astro -->
     <Nav />
   </header>
   <div class="contentTodo">
     <!-- Colocamo nuestro componente React -->
     <TodoReact:visible />
     <!-- Colocamo nuestro componente Svelte -->
     <TodoSvelte:visible />
   </div>
 </body>
</html>

Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (---).

Routing

El enrutamiento ocurre dentro de src/pages/* los archivos .astro se convierten en .html estático.

Por ejemplo tienes lo siguiente:

  • index.astro
  • about.astro
  • 404.astro

Los archivos de esta carpeta se corresponde con una URL pública.

Ejemplo:

Archivo local URL publica
src/pages/index.astro /index.html

¡Astro tiene muchas características más!

Más info

Conclusión

Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.

¡Saludos!

37

This website collects cookies to deliver better user experience