Inicio rápido de GitHub Codespaces

Prueba GitHub Codespaces en 5 minutos.

En este artículo

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 obtener más información sobre cómo funcionan exactamente GitHub Codespaces, consulta la guía complementaria Análisis en profundidad de GitHub Codespaces.

Crea tu codespace

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

  2. Haz clic en Usar esta plantilla y luego en Abrir en un codespace.

    Captura de pantalla del botón "Usar esta plantilla" y el menú desplegable expandido para mostrar la opción "Abrir en un codespace".

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.

    Captura de pantalla del terminal en VS Code con el comando "npm run dev" escrito.

    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 emergente para informarle de que el puerto ha sido redirigido.

    Captura de pantalla del mensaje emergente: "La aplicación que se ejecuta en el puerto 3000 está disponible". Debajo se muestra un botón verde, con la etiqueta "Abrir en el explorador".

  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 del explorador, haz clic en la pestaña Puertos de VS Code, mantén el puntero sobre el valor Dirección local del puerto en ejecución y haz clic en el icono Abrir en el explorador.

    Captura de pantalla del panel "Puertos". La pestaña "Puertos" y un icono de globo, que abre el puerto reenviado en un explorador, se resaltan con contornos naranjas.

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.

    Captura de pantalla de la barra de actividad de VS Code con el botón Control de código fuente resaltado con un contorno naranja.

  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.

    Captura de pantalla de la barra lateral "Control de código fuente" con el botón de almacenamiento provisional (un signo más), a la derecha de "Cambios", resaltado con un contorno naranja oscuro.

  3. Para confirmar los cambios agregados al "stage", escribe un mensaje de confirmación en el que se describa el cambio realizado y, a continuación, haz clic en Confirmar.

    Captura de pantalla de la barra lateral "Control de código fuente". Se ha escrito un mensaje de confirmación con "Cambiar el texto y los estilos de haiku" y el botón "Confirmar" está resaltado con un contorno naranja.

  4. Haz clic en Publicar rama.

    Captura de pantalla de la barra lateral "Control de código fuente" que muestra el botón "Publicar rama".

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

    Captura de pantalla de la lista desplegable de nombre de repositorio en VS Code. Se muestran dos opciones para publicar en un repositorio privado o público.

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

  6. En el elemento emergente que aparece en la esquina inferior derecha del editor, haga clic en Abrir en GitHub para ver el nuevo repositorio en GitHub. 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 de un mensaje de confirmación de un repositorio publicado con éxito, que muestra el botón "Abrir en GitHub".

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. Selecciona el icono de extensiones en la barra de actividades.

    Captura de pantalla de la barra Actividades. El icono Extensiones aparece resaltado con un contorno naranja.

  2. En la barra de búsqueda, escribe fairyfloss y haz clic en Instalar.

    Captura de pantalla de la barra lateral "Extensiones: Marketplace". "fairyfloss" se introduce en el cuadro de búsqueda y, debajo, se muestra la extensión "fairyfloss", con un botón "Instalar".

  3. Seleccione el tema fairyfloss en la lista.

    Captura de pantalla de la lista desplegable "Seleccionar tema de color", con el tema "fairyfloss" seleccionado.

Acerca de la Sincronización de la configuración

Puedes habilitar la Sincronización de la configuración para sincronizar extensiones y otras configuraciones en dispositivos e instancias de VS Code. La configuración sincronizada se almacena en caché en la nube. Si la sincronización de la configuración está activada en un codespace, las actualizaciones que realices en la configuración del codespace se insertan en la nube, mientras que las actualizaciones que insertes en la nube desde otro lugar se extraen en el codespace. Para obtener más información, consulta Personalización de GitHub Codespaces para la cuenta.

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