Skip to main content

Inicio rápido de GitHub Codespaces

Prueba GitHub Codespaces en 5 minutos.

Introducción

En esta guía, creará un codespace a partir de un repositorio de plantillas y explorará algunas de las características esenciales disponibles en el codespace. Trabajarás en la versión web de Visual Studio Code, que es inicialmente el editor predeterminado para GitHub Codespaces. Después de probar esta guía de inicio rápido, puedes usar Codespaces en otros editores y cambiar el editor predeterminado. Los vínculos se proporcionan al final de esta guía.

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 publicar tu codespace en un nuevo repositorio y cómo personalizar tu configuración con extensiones.

Para más información sobre cómo funcionan exactamente GitHub Codespaces, ve la guía complementaria "Profundización en GitHub Codespaces".

Crea tu codespace

  1. Ve al repositorio de plantillas github/haikus-for-codespaces.

  2. Encima de la lista de archivos, haz clic en Usar esta plantilla y, después, selecciona Abrir en un codespace.

    Botón Usar esta plantilla

Ejecución de la aplicación

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

  1. Cuando el terminal esté disponible, escribe el comando npm run dev. En este ejemplo se usa un proyecto de Node.js y este comando ejecuta el script con la etiqueta "dev" en el archivo package.json, que inicia la aplicación web definida en el repositorio de muestra.

    npm run dev en la temrinal

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

  2. Cuando se inicia la aplicación, el codespace reconoce el puerto en el que se ejecuta la aplicación y muestra un mensaje para informarle de que se ha reenviado.

    Notificación del sistema de enrutamiento de puerto

  3. Haga clic en Abrir en el explorador para ver la aplicación en ejecución en una pestaña nueva.

Editar la aplicación y ver los cambios

  1. Vuelve al codespace y haz clic en el archivo haikus.json para abrirlo en el Explorador.

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

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

    Si has cerrado la pestaña, abre el panel Puertos y haz clic en el icono Abrir en el explorador del puerto en ejecución.

    Panel de reenvío de puertos

Confirmar y subir tus cambios

Ahora que has hecho algunos cambios, puedes usar el terminal integrado o la vista de código fuente para publicar tu trabajo en un nuevo repositorio.

  1. En la barra de actividad, haga clic en la vista Control de código fuente. Vista de control de código fuente

  2. Para agregar los cambios al "stage", haz clic en + junto al archivo haikus.json o junto a Cambios si has cambiado varios archivos y quieres agregarlos todos.

    Barra lateral de control de código fuente con el botón de almacenamiento provisional resaltado

  3. Para confirmar los cambios "staged", escribe un mensaje de confirmación que describa el cambio realizado y, después, haz clic en Confirmar.

    Barra de control de código fuente con un mensaje de confirmación

  4. Haz clic en Publicar rama.

    Captura de pantalla del botón "Publicar rama" en VS Code

  5. En la lista desplegable "Nombre del repositorio", escribe un nombre para el nuevo repositorio y selecciona Publicar en el repositorio privado de GitHub o Publicar en el repositorio público de GitHub .

    Captura de pantalla de la lista desplegable "Nombre del repositorio" en VS Code

    El propietario del nuevo repositorio será la cuenta de GitHub con la que creaste el codespace.

  6. En el elemento emergente que aparece en la esquina inferior derecha del editor, haz clic en Abrir en GitHub para ver el nuevo repositorio en GitHub.com. En el nuevo repositorio, consulta el archivo haikus.json y comprueba que el cambio realizado en el codespace se haya enviado correctamente al repositorio.

    Captura de pantalla del elemento emergente "Abrir en GitHub" en VS Code

Personalizar con una extensión

Cuando te conectas a un codespace mediante el explorador o la aplicación de escritorio de Visual Studio Code, puedes acceder a la Visual Studio Code Marketplace directamente desde el editor. En este ejemplo, instalarás una extensión VS Code que alterará 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, escribe fairyfloss y haz clic en Instalar.

    Agregar una extensión

  3. Seleccione el tema fairyfloss en la lista.

    Seleccionar el tema de fairyfloss

Si estás usando un codespace en el explorador o en la aplicación de escritorio de Visual Studio Code y has activado Sincronización de ajustes, cualquier cambio que realices en la configuración del editor en el codespace actual, como cambiar el tema o los enlaces de teclado, se sincroniza automáticamente con cualquier instancia de Visual Studio Code que esté registrada en tu cuenta de GitHub y con cualquier otro codespace que crees.

Pasos siguientes

Creaste, personalizaste y ejecutaste exitosamente tu primer aplicación dentro de un codespace, pero ¡hay mucho más que explorar! Estos son algunos recursos útiles para que completes los siguientes pasos con GitHub Codespaces.

Información adicional