diff --git a/src/content/docs/es/develop-and-build.mdx b/src/content/docs/es/develop-and-build.mdx new file mode 100644 index 0000000000000..820e201bdc219 --- /dev/null +++ b/src/content/docs/es/develop-and-build.mdx @@ -0,0 +1,144 @@ +--- +title: Desarrolla y construye +description: 'Como empezar a trabajar en un nuevo proyecto' +i18nReady: true +--- +import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; + +隆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](#configura-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 + + + + ```shell + npm run dev + ``` + + + ```shell + pnpm run dev + ``` + + + ```shell + yarn run dev + ``` + + + +Si todo sale bien, Astro ahora estar谩 sirviendo tu proyecto en [http://localhost:4321/](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](/es/guides/dev-toolbar/). Mientras desarrolles, la barra te ayudar谩 a inspeccionar tus [islas](/es/concepts/islands/), 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/](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: + + + + ```shell + npm run build + ``` + + + ```shell + pnpm build + ``` + + + ```shell + 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](#trabajar-en-modo-de-desarrollo) que actualice la previsualizaci贸n de tu sitio mientras editas los archivos. + +Lee m谩s sobre [el Astro CLI](/es/reference/cli-reference/) y los comandos de terminal que usar谩s mientras desarrollas con Astro. + +:::tip +Talvez vas a querer [desplegar tu sitio inmediatamente](/es/guides/deploy/), antes de que agregues o cambies mucho c贸digo. Esto es beneficioso a tener una versi贸n minima y funcional de tu sitio publicada, esto podr谩 ahorrarte tiempo y esfuerzo extra de soluci贸n de problemas para un despliegue futuro. +::: + +## 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. + + + + + + + +### Nuevas funcionalidades de Astro + + + + + + + + +### Toma el tutorial introductorio + +Desarrolla un blog en Astro totalmente funcional desde una p谩gina en blanco con nuestro [tutorial introductorio](/es/tutorial/0-introduction/). + +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. \ No newline at end of file