Inicio rápido para GitHub Codespaces

Empiece a usar GitHub Codespaces rápidamente.

En este artículo

Presentació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 para navegador de Visual Studio Code, que inicialmente es el editor predeterminado de GitHub Codespaces. Después de probar este inicio rápido, puede usar Codespaces en otros editores y puede 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 GitHub Codespaces funciona exactamente, consulte 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 inicio 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 ha cerrado la pestaña del explorador, haga clic en la pestaña Puertos de VS Code, mantenga el puntero sobre el valor dirección local del puerto en ejecución y haga 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 almacenar provisionalmente los cambios, haga clic junto al haikus.json archivo o junto a Cambios si ha cambiado varios archivos y desea almacenarlos provisionalmente 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". El mensaje de confirmación "Cambiar el texto y los estilos de haiku" y el botón "Confirmar" están resaltados en 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", escriba un nombre para el nuevo repositorio y, a continuación, seleccione Publicar en GitHub repositorio privado o Publicar en GitHub repositorio público.

    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 la ventana 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 se conecta a un espacio de código mediante el explorador o la Visual Studio Code aplicación de escritorio, puede acceder a Visual Studio Code Marketplace directamente desde el editor. En este ejemplo, instalará una VS Code extensión que modifique el tema, pero puede instalar cualquier extensión que sea útil para el 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 "Extensiones: Marketplace". El cuadro de búsqueda muestra "fairyfloss". Los resultados muestran 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

Puede habilitar Sincronización de la configuración para sincronizar extensiones y otras configuraciones entre 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, consulte Personalización de GitHub Codespaces para su 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 realizar los pasos siguientes con GitHub Codespaces.

Información adicional