Crea tu primer proyecto en Astro

Prepárate para...

Ejecutar el asistente de configuración create astro para crear un nuevo proyecto Astro
Iniciar el servidor Astro en modo de desarrollo (dev)
Ver una vista previa en directo de tu sitio web en tu navegador

Inicia el asistente de configuración de Astro

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

En la línea de comandos de tu terminal, ejecuta el siguiente comando utilizando tu gestor de paquetes preferido:
- npm
- pnpm
- Yarn
Ventana de terminal
# crear un nuevo proyecto con npm npm create astro@latest
Ventana de terminal
# crear un nuevo proyecto con pnpm pnpm create astro@latest
Ventana de terminal
# crear un nuevo proyecto con yarn yarn create astro
Confirma y para instalar create-astro.
Cuando la instrucción te pregunte “Where would you like to create your new project?”, escribe el nombre de una carpeta para crear un nuevo directorio para tu proyecto, por ejemplo ./tutorial

Un nuevo proyecto de Astro sólo puede crearse en una carpeta completamente vacía, así que elige un nombre para tu carpeta que no exista.
Verás una pequeña lista de plantillas de inicio entre las que puedes elegir. Utiliza las teclas de flecha (arriba y abajo) para navegar hasta la plantilla “Empty” y luego presiona la tecla de retorno (Enter) para enviar tu elección.
Cuando la instrucción te pregunte si planeas escribir TypeScript, escribe n.
Cuando aparezca la pregunta “Would you like to install dependencies?”, escribe y.
Cuando la instrucción te pregunte: “Would you like to initialize a new git repository?”, escribe y.

Cuando finalice el asistente de instalación, ya no necesitarás esta terminal. Ahora puedes abrir VS Code para continuar.

Abre tu proyecto en VS Code

Abre VS Code. Se te pedirá que abra una carpeta. Elige la carpeta que creaste durante el asistente de instalación.
Si es la primera vez que abres un proyecto de Astro, deberías ver una notificación preguntándote si deseas instalar las extensiones recomendadas. Haz clic para ver las extensiones recomendadas y elige Astro language support extension. Esto proporcionará resaltado de sintaxis y autocompletado para tu código Astro.
Asegúrate de que el terminal esté visible y que puedas ver el símbolo del sistema, por ejemplo:
Ventana de terminal
```
user@machine:~/tutorial$
```
Para cambiar la visibilidad del terminal, utiliza Ctrl + J (macOS: Cmd ⌘ + J).

Ahora puedes utilizar el terminal integrada en esta ventana, en lugar de la aplicación Terminal de tu ordenador, para el resto de este tutorial.

Ejecuta Astro en modo desarrollo

Para poder previsualizar los archivos de tu proyecto como un sitio web mientras trabajas, necesitarás que Astro se ejecute en modo desarrollo (dev).

Inicia el servidor de desarrollo

Ejecuta el comando para iniciar el servidor Astro dev escribiendo en el terminal de VS Code:
- npm
- pnpm
- Yarn
Ventana de terminal
npm run dev
Ventana de terminal
pnpm run dev
Ventana de terminal
yarn run dev
Ahora deberías ver la confirmación en el terminal que Astro está siendo ejecutando en modo dev. 🚀

Visualiza una vista previa de tu sitio web

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

Haz clic en el enlace localhost en la terminal para ver una vista previa en directo de tu nuevo sitio web de Astro.

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

Este es el aspecto que debería tener el sitio web de inicio del “Proyecto vacío” de Astro en la vista previa del navegador: