Trabajar con entornos de desarrollo preconfigurados directamente desde el navegador o desde Visual Studio Code es una de las ventajas más potentes de GitHub Codespaces. Más allá de crear un codespace desde un repositorio, las plantillas permiten iniciar proyectos desde cero con tecnologías como Django, Node, PHP o .NET, sin necesidad de configurar nada en tu computadora local.
¿Cómo crear un codespace desde una plantilla?
Desde github.com/codespaces puedes ver todos los codespaces que tienes creados. En lugar de vincularlo a un repositorio existente, puedes seleccionar la opción de plantillas en el panel derecho [0:17]. Al hacer clic en "ver todas", aparecen múltiples opciones preconfiguradas para distintas tecnologías.
Al elegir una plantilla como Django con Python, el entorno se crea directamente sin pasar por el cuestionario de configuración que aparece al trabajar desde un repositorio [0:38]. Simplemente se genera el codespace y queda listo para usarse.
¿Es posible ver cambios en tiempo real con Django?
Una vez creado el codespace, el proyecto queda expuesto al internet a través de una URL pública [1:12]. Esto significa que puedes compartir esa dirección con cualquier persona para mostrar tus avances sin configuraciones adicionales.
Gracias a que Python es un lenguaje interpretado y no necesita compilación, los cambios se reflejan prácticamente en tiempo real [1:36]. Por ejemplo, al modificar el archivo index.html en la línea correspondiente, basta con refrescar la página para ver la actualización. Incluso algunos cambios se aplican con un simple refresco automático sin reiniciar el servidor de Django [2:20].
¿Qué es el archivo devcontainer.json?
Dentro del proyecto existe una carpeta llamada .devcontainer con un archivo devcontainer.json [2:52]. Este archivo es el corazón de la configuración del codespace. Lo que hace es empaquetar todos los archivos y la configuración necesaria dentro de un contenedor, algo similar a una máquina virtual muy ligera.
- Define la configuración del lenguaje, como Python [3:18].
- Especifica las extensiones de Visual Studio Code que se instalan automáticamente [3:27].
- Permite agregar nuevas extensiones de forma permanente.
Por ejemplo, si instalas la extensión Live Share dentro del codespace, esta no se conserva por defecto al reiniciar. Para que persista, debes agregarla al devcontainer.json usando la opción add to devcontainer.json desde el engrane de la extensión [3:55]. Así, el contenedor recordará que la plantilla necesita tanto la extensión de Python como Live Share.
¿Cómo abrir un codespace en Visual Studio Code de escritorio?
Trabajar desde el navegador es funcional, pero también es posible abrir el codespace en Visual Studio Code Desktop [4:25]. Desde el menú de tres líneas horizontales, seleccionas la opción correspondiente y el entorno se abre directamente en tu editor local.
Si es la primera vez, VSCode te pedirá instalar la extensión GitHub Codespaces [4:42]. Una vez instalada, el proyecto se carga y la URL se vuelve local.
¿Qué hacer si aparece un error de puerto en uso?
Un detalle importante: al ejecutar la aplicación desde VSCode Desktop, puede aparecer un error indicando que el puerto ya está en uso [4:58]. Esto ocurre porque tanto el navegador como VSCode apuntan a la misma máquina virtual. La solución es sencilla:
- Regresa al navegador y detén el servidor con
Ctrl + C [5:26].
- Vuelve a VSCode Desktop y ejecuta el servidor desde ahí.
- Los cambios realizados en cualquiera de los dos entornos llegan al mismo repositorio [5:50].
¿Qué otras plantillas están disponibles en Codespaces?
Las plantillas cubren una amplia variedad de tecnologías:
- Jupyter: ideal para explorar ciencia de datos y aprender Python orientado a análisis [6:10].
- Node.js: para proyectos de JavaScript del lado del servidor.
- PHP: entornos web clásicos.
- .NET: aplicaciones compiladas de Microsoft.
La ventaja principal es que puedes experimentar con cualquier tecnología y, al terminar, simplemente eliminar el codespace sin haber modificado nada en tu computadora [6:25]. También puedes estudiar cómo está configurado el devcontainer.json de cada plantilla para aprender a personalizar tus propios entornos.
¿Ya probaste alguna plantilla de Codespaces? Comparte cuál fue tu experiencia y qué tecnología exploraste.
