Inicio rápido para Codespaces

Introducción

En esta guía, crearás un codespace desde un repositorio de plantilla y explorarás algunas de las características esenciales disponibles para ti dentro del codespace.

Desde esta guía de inicio rápido, aprenderás cómo crear un codespace, cómo conectarte a un puerto reenviado para ver tu aplicación ejecutándose, cómo utilizar el control de versiones en un codespace y cómo personalizar tu configuración con extensiones.

Para obtener más información sobre cómo funcionan los Codespaces exactamente, consulta la guía compañera "Conoce los Codespaces a fondo".

Crea tu codespace

1. Navega al repositorio de plantilla y selecciona Utilizar esta plantilla.

2. Nombra a tu repositorio, selecciona tu configuración de privacidad preferido y haz clic en Crear repositorio desde plantilla.

3. Navega a la página principal del repositorio recientemente creado. Debajo del nombre de repositorio, utiliza el menú desplegable Código y la pestaña de Codespaces y haz clic en Crear codespace en rama principal.

   

Ejecutar la aplicación

Una vez que se cree tu codespace, tu repositorio se clonará automáticamente en él. Ahora puedes ejecutar la aplicación y lanzarla en un buscador.

1. Ya que este ejemplo utiliza un proyecto en Node.js, inicia la aplicación ingresando npm run dev en la terminal. Este comando ejecuta el script dev en el archivo package.json e inicia la aplicación web que se define en el repositorio de muestra.

   

   Si estás siguiendo la guía con un tipo de aplicación diferente, ingresa el comando de incio correspondiente para este.

2. Cuando tu aplicación comienza, el codespace reconoce el puerto en el que se está ejecutando esta y muestra un mensaje para dejarte saber que se reenvió.

   

3. Haz clic en Abrir en el buscador para ver tu aplicación que se está ejecutando en una pestaña nueva.

Editar la aplicación y ver los cambios

1. Regresa a tu codespace y abre el archivo haikus.json haciendo doble clic en el Explorador de Archivos.

2. Edita el campo text del primer haiku para personalizar la aplicación con tu propio haiku.

3. Regresa a la pestaña de la aplicación en ejecución dentro de tu buscador y actualiza para ver los cambios.

   Si cerraste la pestaña, abre el panel de Puertos y haz clic en el icono de Abrir en el buscador para el puerto en ejecución.

Confirmar y subir tus cambios

Ahora que hiciste algunos cambios, puedes utilizar la terminal integrada o la vista de código fuente para confirmar y subir los cambios al remoto.

1. En la barra de actividad, haz clic en la vista de Control de código fuente.
2. Para probar tus cambios, haz clic en + junto al archivo que cambiaste o junto a Cambios si cambiaste archivos múltiples y quieres probarlos todos.
3. Teclea un mensaje de confirmación que describa el cambio que hiciste.
4. Para confirmar tus cambios planeados, haz clic en la marca de verificación en la parte superior de la barra lateral del control de código fuente.
   Puedes subir los cambios que hiciste. Esto aplica a aquellos de la rama ascendente en el repositorio remoto. Puede que necesites hacer eso si aún no estás listo para crear una solicitud de cambios o si prefieres crearla en GitHub.
5. En la parte superior de la barra lateral, haz clic en los puntos suspensivos (...).
6. En el menú desplegable, haz clic en Subir.

Personalizar con una extensión

Dentro de un codespace, tienes acceso a Mercado de Visual Studio Code. Para este ejemplo, instalarás una extensión que altera el tema, pero puedes instalar cualquier extensión que sea útil para tu flujo de trabajo.

1. En la barra lateral, haz clic en el icono de extensiones.

2. En la barra de búsqueda, ingresa fairyfloss e instala la extensión de fairyfloss.

   

3. Selecciona el tema fairyfloss seleccionándolo de la lista.

   

4. Los cambios que hagas a la configuración de tu editor en el codespace actual, tales como el tema y las uniones del teclado, se sincronizarán automáticamente a través de la Sincornización de ajustes a cualquier otro codespace que abras y a cualquier instancia de Visual Studio Code que esté firmada en tu cuenta de GitHub.

Siguientes pasos

Creaste, personalizaste y ejecutaste exitosamente tu primer aplicación dentro de un codespace, pero ¡hay mucho más que explorar! Aquí tienes algunos recursos útiles para que tomes tus siguientes pasos con Codespaces.

• Cónocelo a fondo: Esta guía de inicio rápido presenta algunas de las características de los Codespaces. La guía a fondo ve estas áreas desde un punto de vista técnico.
• Configurar tu proyecto para los Codespaces: Estas guías te proporcionan información sobre cómo configurar tu proyecto para utilizar los Codespaces con lenguajes específicos.
• Configurar los Codespaces para tu proyecto: Esta guía te proporciona detalles para crear una configuración personalizada para los Codespaces para tu proyecto.

Leer más

• Habilitar los Codespaces para tu organizción
• Administrar la facturación para los Codespaces en tu organización