Desarrolla y construye

¡Una vez que tengas un proyecto Astro, ya estás listo para empezar a construir con Astro! 🚀

Edita tu proyecto

Para hacer cambios a tu proyecto, abre la carpeta del proyecto en tu editor de código. Trabajar en modo de desarrollo con el servidor de desarrollo corriendo te permite ver las actualizaciones de tu sitio mientras guardas cada cambio.

También puedes personalizar aspectos en tu ambiente de desarrollo como configurar Typescript o instalar las extensiones de edición oficiales de Astro.

Iniciar el servidor de desarrollo Astro

Astro viene con un servidor de desarrollo incorporado que tiene todo lo que necesitas para desarrollar un proyecto. El comando 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 pre-configurado que correrá el comando astro dev por ti. Despues de navegar al directorio de tu proyecto, usa tu manejador de paquetes favorito para correr este comando e iniciar el servidor de desarrollo Astro

npm run dev

pnpm run dev

yarn run dev

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

Trabajar en modo de desarrollo

Astro escuchará cambios en vivo en tu directorio src y actualizará la previsualización de tu sitio en cada compilación, para que no sea necesario reiniciar el servidor mientras haces cada cambio en tiempo de desarrollo. Siempre vas a poder ver una versión actualizada de tu sitio en tu navegador mientras el servidor de desarrollo esté corriendo.

Cuando estés viendo tu sitio en el navegador, vas a tener acceso a la Barra de desarollo de Astro. Mientras desarrolles, la barra te ayudará a inspeccionar tus islas, detectar problemas de accesibilidad, y más.

Si no es posible abrir tu proyecto en el navegador después de iniciar el servidor de desarrollo, regresa a la terminal donde corriste el comando dev y revisa el mensaje desplegado. Debería mencionar si ocurrió algún error, o si tu proyecto está siendo servido en una dirección URL diferente a http://localhost:4321/.

Contruye y previsualiza tu sitio

Para revisar la versión de tu sitio que será creada en compilación, cierra el servidor de desarrollo (Ctrl + C) y en tu terminal corre el comando apropiado de compilación de tu manejador de paquetes:

npm run build

pnpm build

yarn run build

Astro compilará una versión de tu sitio lista para ser desplegada en una carpeta separada (dist/ por default) y podrás ver su progreso en la terminal. Este te alertará sobre cualquier error de compilación en tu proyecto antes de que despliegues a producción. Si Typescript está configurado en strict o strictest, el comando build también revisará tu proyecto por errores de tipado.

Cuando la compilación sea completada, corre el comando apropiado preview (por ejemplo: npm run preview) en tu terminal y podrás ver la versión compilada de tu sitio de manera local en la misma ventana de tu navegador.

Este comando te permitirá previsualizar tu código de la manera que estaba al momento de ser compilado por última vez. El objetivo de esto es para darte una previsualización de como se verá tu sitio una ve que esté desplegado en internet. Cualquier cambios que hagas a tu código después de la compilación no se verán reflejados en tu previsualización hasta que corras el comando de compilación otra vez.

Usa (Ctrl + C) para cerrar la previsualización y corre otro comando de terminal, como reiniciar el servidor de desarrollo para ir de regreso a un modo de ambiente de desarrollo que actualice la previsualización de tu sitio mientras editas los archivos.

Lee más sobre el Astro CLI y los comandos de terminal que usarás mientras desarrollas con Astro.

Siguientes pasos

¡Éxito! ¡Ya estás listo para empezar a desarrollar con Astro! 🥳

Aquí hay algunas cosas que recomendamos explorar a continuación. Puedes leerlas en cualquier orden. También podrías dejar la documentación por un rato para explorar tu nuevo proyecto Astro, y regresar aquí cuando te encuentres en algun problema o tengas una pregunta.

Configura tu ambiente de desarrollo

Explore las guías a continuación para personalizar tu experiencia de desarrollo.

Configuración de editor Personaliza tu editor de código para mejorar tu experiencia de desarrollo y conoce nuevas funcionalidades.

Barra de herramientas de desarrollo Explora las funcionalidades de la barra de desarrollo.

Configuración de TypeScript Configura opciones para revisión de tipado, IntelliSense, y más.

Nuevas funcionalidades de Astro

Entiende tu código Aprende sobre la estructura de archivos de Astro en nuestra guía de Estructura de proyecto

Crea colecciones de contenido Agrega contenido a tu nuevo sitio con validación frontmatter y revisión de tipado automática.

Agrega transisiones de vista Crea transiciones de página y animaciones fluidas.

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

Toma el tutorial introductorio

Desarrolla un blog en Astro totalmente funcional desde una página en blanco con nuestro tutorial introductorio.

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

Contribuir Comunidad Sponsor