¿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
  • Puedes leer más sobre Astro en el Readme del proyecto.
  • Mira la documentación.
  • También en esta demo que hizo Cassidy con Astro + React + Vue.
  • Aca dejo mi primera experiencia con Astro + React + Svelte + Vue, también puedes verlo en vivo.
  • Echa un vistazo a este artículo en CSS-Tricks.
  • 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!

    40

    This website collects cookies to deliver better user experience

    ¿Qué es Astro y cómo empezar?