Introducción

GitHub Codespaces es una herramienta que esta disponible con tu cuenta de GitHub y es un entorno de desarrollo en la nube super completo, esta herramienta te permite no preocuparte por detalles de infraestructura, sino en lo verdaderamente importante que es resolver problemas y por tener una buena conexión a internet.

GitHub Spaces surge de la necesidad de poder tener un entorno de desarrollo controlado en donde podemos empezar un proyecto muy fácilmente.

Codespaces lo podemos encontrar dentro de nuestra cuenta de GitHub en las opciones de la esquina superior derecha.

Una vez dentro podemos escoger que plantilla ocupar para nuestro nuevo proyecto.

Las plantillas para empezar un proyecto tenemos:

• React
• .NET
• Ruby and Rails
• Jupyter Notebook
• Express
• NextJS
• Django
• Flask

En este ejemplo vamos a ocupar Express pero bien los pasos que vamos a describir se pueden aplicar a cualquiera de las plantillas. Ya que el poder que reside de Codespaces es el de tener un entorno de desarrollo en segundos y no solo eso sino que también ligado a un repositorio de código.

Al seleccionar una plantilla de manera automática se va a crear un proyecto base de Express y que esta disponible en la nube, lo mejor de esto es que no se esta corriendo este proyecto en tu computadora sino en un servidor en la nube de GitHub.

Para poder ligar este espacio de trabajo con un repositorio lo único que tienes que hacer es entrar a la sección de Git del entorno de desarrollo y darle en publicar branch. Ahí te mostrará dos opciones si quieres un repositorio privado o un repositorio publico.

Conectar con Visual Studio Code

Una de las ventajas también de tener el ambiente corriendo en la nube es que tienes la posibilidad de conectar tu Visual Studio Code para trabajar con él de una manera mas "local". Lo que tenemos que hacer es abrir nuestro VS Code, dentro del editor de texto en la esquina inferior izquierda hay un botón azul que tenemos y dar clic y aparecerán algunas opciones, en donde se selecciona Codespaces.

Se solicitará una autorización para que "GitHub para Visual Studio" tenga acceso a la cuenta de GitHub, como se muestra a continuación.

Una vez autorizado el permiso dentro del navegador mostrará todos los Codespaces que se tienen y se pueden ocupar. En este ejemplo solo tenemos uno y lo seleccionamos.

Pasados unos segundos ahora tendremos el Codespaces configurado en nuestro Visual Studio Code, en donde ahora podemos trabajar sin ningún problema como si fuera un proyecto de nuestra computadora.

Aumento de capacidades de cómputo

Si por alguna razón estamos haciendo algún tipo de proyecto en donde tenemos que aumentar la cantidad de poder computacional se pueden mover los parámetros de nuestro entorno de nube muy fácilmente. Directamente dentro de nuestro repositorio hay un botón verde que dice Code, ahí tenemos que dar clic y nos desplegará dos pestañas, en la primera es para clonar y en la segunda concierne a las opciones disponibles de Codespaces. Acá se desplegarán todas las configuraciones que tenemos disponibles, en este caso solo tenemos una y ahí podemos dar clic en el botón con tres círculos para mostrar un menú que contiene varias opciones del CodeSpace, damos clic en donde dice cambiar tipo de maquina. Nos mostrará un menú de varias configuraciones que podemos seleccionar.

Por defecto tenemos una computadora con las siguientes capacidades técnicas:

• 4 cores
• 4 GB de RAM
• 32 GB de espacio de disco duro

Con estas capacidades considero que son mas que suficientes para cualquier proyecto pero si tus necesidades en particular necesitan mayor poder, ahí esta la opción para que lo utilices.

Personalización de Codespaces

Una de las ventajas mas poderosas es que Codespaces esta basado en un contenedor, es por ello que puedes personalizar o mover los parámetros que tu necesites para que se comporte de la forma que necesites, incluso se puede personalizar VS code con los plugins que tu necesites para tu proyecto. Las configuraciones estan dentro de la carpeta de .devcontainer y el archivo devcontainer.json

Agregaremos lo siguiente para instalar Copilot y Copilot Chat dentro del archivo de devcontainer.json, generamos el commit y confirmamos el cambio.

"customizations": {
    "codespaces": {
      "openFiles": [
        "index.js"
      ]
    },
    "vscode": {
      "extensions": [
        "GitHub.copilot",
        "GitHub.copilot-chat"
      ]
    }
  },
...

Dentro del Codespaces bajamos cambios y abrimos la paleta de comandos ejecutamos rebuild container.

Terminado el proceso ya tendremos las dos extensiones que hemos agregado al nuestro Codespaces.

Ahora sabes lo básico para ocupar GitHub Codespaces ahora tu curiosidad es el límite. Mas recursos en:

• https://code.visualstudio.com/docs/devcontainers/tutorial
• https://containers.dev/implementors/json_reference