Desarrollar y compilar

Una vez que tienes un proyecto de Astro, ¡ya estás listo para compilar con Astro! 🚀

Edita tu proyecto

Para realizar cambios en tu proyecto, abre la carpeta de tu proyecto en tu editor de código. Trabajar en modo de desarrollo con el servidor de desarrollo en funcionamiento te permite ver las actualizaciones de tu sitio a medida que editas el código.

También puedes personalizar aspectos de tu entorno de desarrollo, como configurar TypeScript o instalar las extensiones oficiales de editor de Astro.

Inicia el servidor de desarrollo de Astro

Astro viene con un servidor de desarrollo integrado que tiene todo lo que necesitas para el desarrollo del proyecto. El comando de CLI astro dev iniciará el servidor de desarrollo local para que puedas ver tu nuevo sitio web en acción por primera vez.

Cada plantilla de inicio viene con un script preconfigurado que ejecutará astro dev por ti. Después de navegar al directorio de tu proyecto, usa tu gestor de paquetes favorito para ejecutar este comando e iniciar el servidor de desarrollo de Astro.

npm

npm run dev

pnpm

pnpm run dev

Yarn

yarn run dev

Si todo va bien, Astro ahora estará sirviendo tu proyecto en http://localhost:4321/. ¡Visita ese enlace en tu navegador y observa tu nuevo sitio!

Trabaja en modo de desarrollo

Astro escuchará los cambios de archivos en vivo en tu directorio src/ y actualizará la vista previa de tu sitio a medida que lo construyes, por lo que no necesitarás reiniciar el servidor a medida que realizas cambios durante el desarrollo. Siempre podrás ver una versión actualizada de tu sitio en tu navegador cuando el servidor de desarrollo esté funcionando.

Al visualizar tu sitio en el navegador, tendrás acceso a la barra de herramientas de desarrollo de Astro. A medida que construyes, te ayudará a inspeccionar tus islas, detectar problemas de accesibilidad y más.

Si no puedes abrir tu proyecto en el navegador después de iniciar el servidor de desarrollo, regresa a la terminal donde ejecutaste el comando dev y verifica el mensaje que se muestra. Debería indicarte si ocurrió un error o si tu proyecto se está sirviendo en una URL diferente a http://localhost:4321/.

Compila y previsualiza tu sitio

Para verificar la versión de tu sitio que se creará en el momento de la compilación, sal del servidor de desarrollo (Ctrl + C) y ejecuta el comando de compilación correspondiente a tu gestor de paquetes en tu terminal:

npm

npm run build

pnpm

pnpm build

Yarn

yarn run build

Astro compilará una versión lista para desplegar de tu sitio en una carpeta separada (dist/ por defecto) y podrás ver su progreso en la terminal. Esto te alertará sobre cualquier error de compilación en tu proyecto antes de desplegarlo en producción. Si TypeScript está configurado en strict o strictest, el script de build también verificará tu proyecto en busca de errores de tipo.

Cuando finalice la compilación, ejecuta el comando de preview correspondiente (p. ej. npm run preview) en tu terminal y podrás ver la versión compilada de tu sitio localmente en la misma ventana de vista previa del navegador.

Ten en cuenta que esto previsualiza tu código tal como existía la última vez que se ejecutó el comando de compilación. Esto está pensado para darte una vista previa de cómo se verá tu sitio cuando se despliegue en la web. Cualquier cambio posterior que realices en tu código después de compilar no se reflejará mientras previsualizas tu sitio hasta que vuelvas a ejecutar el comando de compilación.

Usa (Ctrl + C) para salir de la vista previa y ejecutar otro comando de terminal, como reiniciar el servidor de desarrollo para volver a trabajar en modo de desarrollo, que sí se actualiza a medida que editas para mostrar una vista previa en vivo de tus cambios de código.

Lee más sobre la CLI de Astro y los comandos de terminal que utilizarás a medida que construyes con Astro.

Consejo

Es posible que desees desplegar tu nuevo sitio de inmediato, antes de comenzar a agregar o cambiar demasiado código. Esto es útil para publicar una versión mínima y funcional de tu sitio y puede ahorrarte tiempo y esfuerzo adicionales para solucionar problemas de despliegue más adelante.

Siguientes pasos

¡Éxito! ¡Ahora estás listo para comenzar a construir con Astro! 🥳

Aquí hay algunas cosas que recomendamos explorar a continuación. Puedes leerlas en cualquier orden. Incluso puedes dejar nuestra documentación por un momento e ir a jugar en el código de tu nuevo proyecto de Astro, regresando aquí cuando tengas problemas o alguna pregunta.

Configura tu entorno de desarrollo

Explora las siguientes guías para personalizar tu experiencia de desarrollo.

Configuración del editor Personaliza tu editor de código para mejorar la experiencia de desarrollo con Astro y desbloquear nuevas funciones.

Barra de herramientas de desarrollo Explora las útiles funciones de la barra de herramientas de desarrollo.

Configuración de TypeScript Configura opciones para comprobación de tipos, IntelliSense y más.

Explora las funciones de Astro

Comprende tu base de código Aprende sobre la estructura de archivos de Astro en nuestra guía de Estructura de proyectos.

Crea colecciones de contenido Añade contenido a tu nuevo sitio con validación de frontmatter y seguridad de tipos automática.

Añade transiciones de vista Crea transiciones de página y animaciones fluidas.

Aprende sobre las islas Lee sobre la arquitectura de islas de Astro.

Haz el tutorial introductorio

Construye un blog de Astro completamente funcional comenzando desde una sola página en blanco en nuestro tutorial introductorio.

Esta es una excelente manera de ver cómo funciona Astro y te guía a través de los conceptos básicos de páginas, layouts, componentes, enrutamiento, islas y más. También incluye una unidad opcional y amigable para principiantes para aquellos que son nuevos en los conceptos de desarrollo web en general, la cual te guiará para instalar las aplicaciones necesarias en tu computadora, crear una cuenta de GitHub y desplegar tu sitio.