Crea tu primer proyecto de Astro

Prepárate para…

• Ejecuta el asistente de configuración create astro para crear un nuevo proyecto de Astro
• Inicia el servidor de Astro en modo de desarrollo (dev)
• Visualiza una vista previa en vivo de tu sitio web en tu navegador

Lanza el asistente de configuración de Astro

La forma preferida de crear un nuevo sitio de Astro es a través de nuestro asistente de configuración create astro.

1. En la línea de comandos de tu terminal, ejecuta el siguiente comando usando tu gestor de paquetes preferido:

   npm

   # create a new project with npm
   npm create astro@latest

   pnpm

   # create a new project with pnpm
   pnpm create astro@latest

   Yarn

   # create a new project with yarn
   yarn create astro

2. Ingresa y para instalar create-astro.

3. Cuando el prompt te pregunte dónde crear el proyecto, escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, ej. ./tutorial

   Nota

   Un nuevo proyecto de Astro solo puede crearse en una carpeta completamente vacía, ¡así que elige un nombre para tu carpeta que no exista ya!

4. Verás una breve lista de plantillas de inicio para elegir. Usa las teclas de flecha (arriba y abajo) para navegar a la plantilla mínima (vacía), y luego presiona return (enter) para enviar tu elección.

5. Cuando el prompt te pregunte si quieres o no instalar dependencias, ingresa y.

6. Cuando el prompt te pregunte si quieres o no inicializar un nuevo repositorio de git, ingresa y.

Cuando el asistente de instalación termine, ya no necesitas esta terminal. Ahora puedes abrir VS Code para continuar.

Abre tu proyecto en VS Code

7. Abre VS Code. Se te pedirá que abras una carpeta. Elige la carpeta que creaste durante el asistente de configuración.

8. Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntando si te gustaría instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas, y elige la extensión de soporte del lenguaje Astro. Esto proporcionará resaltado de sintaxis y autocompletados para tu código de Astro.

9. Asegúrate de que la terminal sea visible y de que puedas ver el prompt de comandos, como:

   user@machine:~/tutorial$

   Atajo de teclado

   Para alternar la visibilidad de la terminal, usa Ctrl + J (macOS: Cmd ⌘ + J).

Ahora puedes usar la terminal integrada en esta ventana, en lugar de la app de Terminal de tu computadora, para el resto de este tutorial.

Ejecuta Astro en modo dev

Para previsualizar los archivos de tu proyecto como un sitio web mientras trabajas, necesitarás que Astro esté ejecutándose en modo de desarrollo (dev).

Inicia el dev server

10. Ejecuta el comando para iniciar el dev server de Astro escribiendo en la terminal de VS Code:

    npm

    npm run dev

    pnpm

    pnpm run dev

    Yarn

    yarn run dev

    Ahora deberías ver confirmación en la terminal de que Astro está ejecutándose en modo dev. 🚀

Visualiza una vista previa de tu sitio web

Los archivos de tu proyecto contienen todo el código necesario para mostrar un sitio web de Astro, pero el navegador es responsable de mostrar tu código como páginas web.

11. ¡Haz clic en el enlace localhost en tu ventana de terminal para ver una vista previa en vivo de tu nuevo sitio web de Astro!

    (Astro usa http://localhost:4321 por defecto si el puerto 4321 está disponible.)

    Así es como debería verse el sitio web del starter "Empty Project" de Astro en la vista previa del navegador:

    

Usando el dev server de Astro

Mientras el servidor de Astro esté ejecutándose en modo dev, NO podrás ejecutar comandos en tu ventana de terminal. En su lugar, este panel te dará feedback mientras previsualizas tu sitio.

Puedes detener el dev server en cualquier momento y volver al prompt de comandos escribiendo Ctrl + C en la terminal.

A veces el dev server se detendrá por sí solo mientras trabajas. Si tu vista previa en vivo deja de funcionar, vuelve a la terminal y reinicia el dev server escribiendo npm run dev.

Checklist

• Puedo crear un nuevo proyecto de Astro.
• Puedo iniciar el dev server de Astro.

Recursos

• Getting Started with Visual Studio Code externo — un tutorial en video para instalar, configurar y trabajar con VS Code