Creación del proyecto base de AstroJS

En este tutorial aprenderás a crear tu primer proyecto con AstroJS. Utilizaremos la herramienta npm create astro para generar una aplicación de servidor que pueda interactuar con la API de OpenAI. Explorarás la estructura del proyecto generado y obtendrás una breve descripción de cómo ponerlo en funcionamiento. ¡Comencemos!

Principales conclusiones

• Crear un nuevo proyecto en AstroJS es fácil y está asistido por un asistente interactivo.
• La creación del proyecto incluye la configuración de dependencias (módulos de NPM) y la definición del nombre del proyecto.
• La función integrada de recarga en caliente de AstroJS te permite ver los cambios en tiempo real sin tener que recargar la página manualmente.

Guía paso a paso

Para configurar tu proyecto AstroJS, sigue los siguientes pasos:

Primero, abre tu terminal. Asegúrate de poder ejecutar comandos. El primer paso es ingresar el comando npm create astro. Este comando inicia un asistente que te guiará a través de la creación del nuevo proyecto. 

Al iniciar el asistente, es posible que se te pida confirmar la instalación de un paquete npm específico. Si se te solicita, confirma la instalación.

Luego se te pedirá un nombre para tu nuevo proyecto. En nuestro caso, simplemente llamaremos al proyecto ai-chat. Ingresa el nombre deseado y presiona Enter.

El asistente luego te preguntará si deseas instalar archivos de ejemplo (sample files). Como no los necesitamos, elige n para "no" y continúa.

El siguiente paso es la instalación de las dependencias necesarias. Se te preguntará si deseas instalar directamente los módulos de npm correspondientes. Se recomienda responder afirmativamente para automatizar el proceso de instalación.

Después de instalar las dependencias, el asistente preguntará si deseas usar TypeScript. Se recomienda rechazar el uso de TypeScript, ya que puede aumentar la complejidad. Si lo necesitas, siempre puedes agregar TypeScript más adelante.

Otro paso es decidir si deseas utilizar un repositorio inicial. Por lo general, esto no es necesario al principio, así que también elige n para "no" aquí.

Una vez que hayas respondido todas las preguntas, recibirás un mensaje final agradable del asistente. Con esta confirmación, la parte básica del proyecto ha sido completada.

Ahora echemos un vistazo a la estructura del proyecto generado. Cambia al directorio del proyecto con cd ai-chat para explorar la estructura creada.

Puedes ver la estructura del proyecto con el comando tree. Esto te dará una visión general de los archivos y carpetas creados.

En el directorio de tu proyecto encontrarás en src el código fuente real de Astro. Aquí se encuentra el archivo index.astro, que actúa como tu página de inicio y nos ocuparemos de eso enseguida.

Para ejecutar localmente tu proyecto Astro, debes llamar a un script. Utiliza el comando npm run dev. Este comando iniciará un servidor de desarrollo que proporcionará la aplicación.

Una vez que el servidor de desarrollo esté en funcionamiento, se te mostrará una dirección, generalmente localhost:3000. Puedes abrir esta dirección en tu navegador web para ver la aplicación.

Puedes copiar la dirección y pegarla en el navegador. Alternativamente, puedes hacer clic derecho (o Command-clic en Mac) en la dirección en la terminal para abrirla directamente en el navegador.

Si todo está configurado correctamente, deberías ver tu página de Astro, mostrando que el servidor está corriendo correctamente.

Para demostrar lo fácil que es hacer cambios, puedes modificar el texto dentro de index.astro. Cambiemos el texto a un Chatbot de IA y verifiquemos en el navegador si el cambio es visible.

Una vez que hayas guardado los cambios, la página se actualizará automáticamente en el navegador, sin necesidad de recargarla manualmente. ¡Esta es una de las excelentes funciones de AstroJS!

Esta función de recarga en caliente te permite ver los cambios en tiempo real, acelerando significativamente el proceso de desarrollo.

Tu primer proyecto de Astro está listo y puedes seguir haciendo ajustes o construir sobre él. El archivo index.astro se convertirá en una página HTML y se entregará al navegador. Ahora puedes empezar a desarrollar y añadir nuevas funciones.

¡Hasta la próxima vez, cuando exploremos los próximos pasos en este emocionante proyecto!

Resumen

En este tutorial has aprendido cómo crear un nuevo proyecto AstroJS con npm create astro. Desde la instalación de las dependencias hasta el uso del recarga en caliente, has pasado por todos los pasos básicos para poner en marcha tu primera página de Astro.