Crear un proyecto con Astro empieza por preparar tu entorno local y ejecutar el comando de instalación oficial. Aquí aprenderás cómo instalar Astro, configurar TypeScript, inicializar Git y levantar el servidor de desarrollo para construir una tienda en línea desde cero.

Qué herramientas necesitas antes de instalar Astro

Antes de tocar una sola línea de código, asegúrate de tener todo el stack listo en tu computadora. Sin estas piezas, el comando de instalación no va a funcionar.

• Node.js en su versión más reciente, base para correr el proyecto.
• Un navegador moderno como Google Chrome para previsualizar tu trabajo.
• Un editor de código, en este caso Visual Studio Code.
• Una terminal para ejecutar comandos, como Warp.

Una recomendación práctica: organiza tus carpetas antes de empezar. Una carpeta dedicada a desarrollo, y dentro subcarpetas por tipo de proyecto (trabajo, personales, laboratorios) te ahorra caos más adelante [01:38].

Cómo ejecutar el comando de instalación de Astro

El punto de partida oficial es astro.build, donde encuentras el comando de instalación en la portada. Lo copias, abres tu terminal y te mueves a la carpeta donde quieres alojar el proyecto.

Antes de correr el comando, crea tu carpeta de trabajo con mkdir cursos y entra a ella. Cuando ejecutas el instalador sin pasar argumentos, Astro genera un nombre aleatorio para el proyecto. Por eso conviene asignarle un nombre propio, por ejemplo ladrillos.club, que será una tienda en línea con un catálogo de productos Lego [02:50].

¿Qué hace el comando de creación de Astro? Lanza una interfaz de línea de comandos (CLI) que te guía paso a paso para configurar la estructura inicial: archivos base, TypeScript, dependencias y Git.

Cómo configurar TypeScript, dependencias y Git en Astro

Una vez que ejecutas el comando, la CLI de Astro te hace varias preguntas clave. Cada respuesta moldea cómo va a quedar tu proyecto.

Qué opciones elegir en la CLI de Astro

La terminal te va a presentar este flujo de decisiones:

1. Estructura inicial: elige incluir archivos de ejemplo base si quieres una plantilla con contenido para explorar.
2. TypeScript: acepta usarlo. No necesitas dominarlo desde el inicio; lo irás entendiendo con la práctica.
3. Nivel de configuración de TypeScript: selecciona la opción recomendada, ni estricta ni demasiado relajada.
4. Instalar dependencias: di que sí para que npm haga el trabajo automáticamente.
5. Inicializar Git: siempre que sí, sin importar si vas a subir el repo a GitHub, GitLab u otra plataforma.

Esa última decisión no es opcional en la práctica profesional. Cualquier proyecto que empieces debes versionarlo con Git desde el primer día, aunque nunca salga de tu máquina.

¿Por qué inicializar Git en todo proyecto nuevo? Porque te da historial de cambios, te permite revertir errores y deja la puerta abierta a colaborar o desplegar en cualquier momento.

Qué pasa después de confirmar la configuración

La CLI procede a crear la configuración, descargar los archivos template, instalar dependencias y dejar listo el primer commit en tu repositorio local. Cuando termina, te avisa que estás listo para despegar [04:55].

Cómo levantar el servidor de desarrollo de Astro

Con el proyecto creado, entras a la carpeta (cd ladrillos.club en este ejemplo) y abres el editor. Si usas VS Code, el comando code . abre el proyecto directamente desde la terminal.

Ahora viene la parte que conecta todo: el entorno de desarrollo local. Astro te entrega un servidor que recarga tus cambios en tiempo real y te muestra errores conforme trabajas.

Para activarlo, ejecuta:

bash npm run dev

Este comando levanta el servidor en localhost:4321. Al abrir esa dirección en el navegador verás la pantalla Welcome to Astro, señal de que todo está funcionando [06:30].

¿Qué es npm run dev en Astro? Es el comando que arranca el servidor local de desarrollo. Te permite ver tu sitio en el navegador y refleja los cambios al instante mientras editas el código.

Desde aquí ya tienes la base para empezar a explorar la estructura de carpetas, modificar componentes y construir tu tienda en línea. Revisa cada archivo que generó la plantilla y date una vuelta por astro.build para descubrir las características del framework.

¿Qué nombre le vas a poner a tu primer proyecto en Astro? Cuéntame en los comentarios.