Plantillas de Codespaces con Django y devcontainer

Contenido del curso

Fundamentos de Git y control de versiones

Introducción a GitHub

Herramientas de colaboración en GitHub

GitHub Codespaces

Seguridad y buenas prácticas en GitHub

Administración de GitHub

Gestión de Cambios con Pull Requests

GitHub Releases

Cierre

42
Pro tips ocultos de GitHub para trabajar mejor
10:13 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:39

Plantillas de Codespaces con Django y devcontainer

Curso de Git y GitHub

Clase 27 de 42

Clase 27 / 42

Recursos

Trabajar con plantillas de GitHub Codespaces te permite levantar entornos preconfigurados para Django, Node, PHP, .NET o Jupyter sin tocar tu máquina local. Aquí verás cómo crear uno desde cero, editar el archivo devcontainer.json y conectarlo a Visual Studio Code Desktop para sacarle más provecho al ciclo de vida del entorno.

¿Cómo creo un Codespace desde una plantilla en lugar de un repositorio?

Entra a github.com/codespaces y verás a la izquierda la lista de tus entornos creados. A la derecha aparece la sección de plantillas con la opción See all para desplegarlas todas [01:00].

Al elegir una plantilla, por ejemplo Django con Python, el Codespace se crea sin pedirte el cuestionario habitual. Solo esperas a que termine de configurarse y ya tienes el entorno corriendo.

¿Qué ventaja tiene una plantilla sobre crear un Codespace desde un repositorio? Te ahorra el cuestionario inicial y te entrega un proyecto base ya funcional, ideal para experimentar con tecnologías nuevas sin instalar nada local.

¿La URL del Codespace es pública?

Sí. Al copiar la URL del proyecto y abrirla en otra pestaña, verás que es accesible desde Internet [01:45]. Como cada Codespace corre sobre una máquina virtual expuesta, puedes compartir esa dirección con alguien para mostrar avances en vivo.

¿Cómo edito código en tiempo real dentro de un Codespace de Django?

Python no necesita compilarse, así que los cambios se reflejan casi al instante. En la línea 24 del archivo de la plantilla aparece el texto GitHub Codespaces con Django, y al modificarlo el navegador refresca el resultado de inmediato [02:30].

Si necesitas reiniciar el servidor, dentro de la terminal presionas Ctrl C para terminar la sesión, limpias con clear y vuelves a ejecutar el comando con la flecha arriba dos veces. En la línea 27, al editar Hello World y agregar una letra, basta un pequeño refresco de pantalla para ver el cambio aplicado.

¿Qué hace el archivo devcontainer.json en un Codespace?

Dentro del proyecto encontrarás una carpeta llamada .devcontainer con un archivo JSON que define toda la configuración del entorno [04:15]. Este archivo mete los archivos y dependencias dentro de un contenedor, una especie de minimáquina virtual donde corre tu Visual Studio en el navegador junto con el lenguaje y las herramientas necesarias.

En la línea 7 está la configuración base de Python para el proyecto.
En la línea 20 aparece el listado de extensiones de VS Code que se instalan por defecto.
En la sección de extensiones puedes agregar nuevas y persistirlas en el contenedor.

¿Cómo agrego una extensión de forma permanente al Codespace?

Buscas la extensión deseada, por ejemplo Live Share, y la instalas dentro del Codespace. Pero instalarla así no la deja fija: si reinicias el entorno, podrías perderla.

La solución está en el pequeño engrane de la extensión, donde eliges Add to devcontainer.json [05:30]. Al hacerlo, el archivo de configuración registra que esa plantilla de Django necesita Python y también Live Share, y la extensión queda lista cada vez que levantes el Codespace.

¿Para qué sirve add to devcontainer.json? Sirve para que una extensión instalada manualmente quede registrada en la configuración del contenedor y se reinstale automáticamente la próxima vez que se cree el entorno.

¿Cómo abro un Codespace en Visual Studio Code Desktop?

Desde el menú de tres líneas horizontales en la parte superior izquierda eliges Open in Visual Studio Code Desktop. Se abre un pop up de confirmación, aceptas y, si es tu primera vez, VS Code te pedirá instalar la extensión GitHub Codespaces [07:00].

Una vez instalado, abajo aparece una leyenda amarilla indicando que se está abriendo un entorno remoto. La conexión es rápida y la URL del proyecto pasa a ser local.

¿Por qué me marca error de puerto en uso al ejecutar Python?

Porque la aplicación sigue corriendo en tu navegador y en VS Code Desktop, y ambas apuntan a la misma máquina virtual. Dos procesos no pueden ocupar el mismo puerto al mismo tiempo.

Para solucionarlo:

Regresa al explorador y abre una nueva terminal en el Codespace.
Si la terminal no responde, refresca la página para reactivar el entorno.
Presiona Ctrl C para detener la aplicación que sigue ejecutándose.
Vuelve a Visual Studio Code, ejecuta clear y levanta de nuevo el servidor.

Con eso liberas el puerto y puedes seguir trabajando desde el escritorio sin perder los cambios. El control de versiones también funciona, así que tus commits llegan al mismo repositorio sin importar si editas en el navegador o en VS Code.

¿Qué plantillas de Codespaces existen además de Django?

La galería incluye opciones para distintos stacks que puedes usar para aprender o prototipar:

Node.js para proyectos JavaScript del lado servidor.
PHP para entornos web clásicos.
.NET para aplicaciones del ecosistema Microsoft.
Django con Python como la usada en este recorrido.
Jupyter para análisis de datos con Python.

La imagen de Jupyter es especialmente útil si estás explorando ciencia de datos: te permite jugar con datasets, aprender Python orientado a esa especialización y, cuando termines, eliminar el Codespace sin haber instalado nada en tu computadora.

La idea de fondo es que abras estas plantillas para revisar cómo están armadas por dentro, leas el devcontainer.json de cada una y aprendas a trabajar con tecnologías nuevas sin depender de tu entorno local. ¿Qué plantilla vas a probar primero?

Mario Alexander Vargas Celis

Hace 2 años

🚀 Configuración de Entornos de Desarrollo Avanzados en GitHub Codespaces

GitHub Codespaces permite personalizar el entorno de desarrollo utilizando containers de desarrollo (Dev Containers). Esto es útil para proyectos complejos que requieren herramientas específicas, dependencias o configuraciones avanzadas.

1️⃣ Habilitar GitHub Codespaces en un Proyecto

Antes de personalizar el entorno, asegúrate de que GitHub Codespaces está habilitado en tu repositorio:

Ve a tu repositorio en GitHub.
Haz clic en el botón "Code" y selecciona la pestaña "Codespaces".
Crea un nuevo Codespace en la rama principal (main).

2️⃣ Personalizar el Entorno con un Dev Container

Para configurar un entorno avanzado, debes agregar un devcontainer a tu repositorio.

📌 Paso 1: Crear la Carpeta de Configuración

En la raíz del repositorio, crea una carpeta llamada .devcontainer/ y dentro de ella, un archivo llamado devcontainer.json.

📌 Paso 2: Definir la Configuración del Contenedor

Aquí tienes un ejemplo de devcontainer.json para un entorno de desarrollo con Python 3.9 y Node.js:

{ "name": "Mi Entorno de Desarrollo", "image": "mcr.microsoft.com/devcontainers/python:3.9", "features": { "ghcr.io/devcontainers/features/node:1": {} }, "extensions": [ "ms-python.python", "ms-vscode.vscode-typescript-tslint-plugin" ], "postCreateCommand": "pip install -r requirements.txt" }

🔹 Explicación: ✅ Usa una imagen de contenedor con Python 3.9. ✅ Agrega soporte para Node.js. ✅ Instala extensiones de VS Code. ✅ Ejecuta pip install -r requirements.txt después de crear el Codespace.

3️⃣ Configurar Variables de Entorno

Si tu proyecto necesita credenciales o claves API, puedes agregarlas en devcontainer.json:

"remoteEnv": { "API_KEY": "tu_clave_aqui" }

También puedes definirlas en GitHub Secrets para mayor seguridad.

4️⃣ Instalar Dependencias Automáticamente

Puedes agregar un script de configuración en .devcontainer/postCreateCommand.sh para instalar dependencias automáticamente:

#!/bin/bash echo "Instalando dependencias..." pip install -r requirements.txt npm install

Luego, agrégalo en devcontainer.json:

"postCreateCommand": "./.devcontainer/postCreateCommand.sh"

5️⃣ Trabajar con Bases de Datos y Servicios

Si tu proyecto necesita MySQL, PostgreSQL o Redis, puedes definirlos en .devcontainer/docker-compose.yml:

version: '3' services: db: image: postgres:13 restart: always environment: POSTGRES_USER: user POSTGRES_PASSWORD: password POSTGRES_DB: mydatabase

Y en devcontainer.json:

"dockerComposeFile": ".devcontainer/docker-compose.yml", "service": "app"

🎯 Conclusión

✅ GitHub Codespaces permite configurar entornos avanzados sin necesidad de instalar nada localmente. ✅ Puedes personalizar el entorno con Dev Containers, instalar dependencias automáticamente y conectar servicios externos. ✅ Esto es ideal para proyectos complejos, colaborativos y con necesidades específicas de configuración.

Comentarios (22)22 comentarios

Jose Luis Bedoya

Samuel Soto Hoyos

ROMMEL DUAREZ SAENZ

Hace 8 meses

SANTIAGO ALBERTO BOLIVAR CARDENAS.

Hace un año

Albert Jose Salas Yustiz

Erick Leonel Mariano Malagón

Dussan Freire

Hace 10 meses

José Lancheros Ayora

Hace 6 meses

Claudia Iliana Padilla Magaña

Jonathan

Hace 3 meses

Andrés Soret Chacin

Diego Mauricio Zuluaga Rodríguez

Gabriel Obregón

Jean Grober

Jose Jhonatan Choque Araujo

Amin Espinoza

Profesor

David López Sandoval

Juan Diego Sastre Moreno

Jhon Freddy Tavera Blandon

Fundamentos de Git y control de versiones

Control de Versiones con Git y GitHub: De Básico a Avanzado

Fundamentos de Git: Configuración y Comandos Básicos

Control de Versiones con Git: Comandos Básicos y Flujo de Trabajo

Gestión de ramas en Git: creación, fusión y eliminación eficiente

Git reset vs revert para deshacer commits

Git Tag y Checkout sin romper tu proyecto

Cómo resolver conflictos de merge en Git

Uso de Git en Visual Studio Code

Introducción a GitHub

Uso de GitHub para Colaboración y Desarrollo Seguro

Cómo crear y proteger tu cuenta de GitHub

Proceso de Trabajo con Git y GitHub: Creación y Revisión de Repositorios

Crea y clona tu primer repo en GitHub

Precios y Planes de Productos de Github

Configuración de SSH en GitHub para Windows, Linux y Mac

Uso de Forks y Estrellas en Repositorios de GitHub

Uso de git pull, git push y git fetch en repositorios GitHub

Plantillas de issues en GitHub paso a paso

Uso de Pull Requests en GitHub para Colaboración Efectiva

Herramientas de colaboración en GitHub

GitHub Projects para gestionar tareas en equipo

Automatiza GitHub Projects con workflows

Recursos Esenciales de Markdown para Documentación Efectiva

Creación de una Portada de Perfil en GitHub con Markdown

Creación y Gestión de Wikis en GitHub

Uso de GitHub Gist para Compartir y Revisar Código Colaborativo

Creación y Publicación de Sitios Web con GitHub Pages

GitHub Codespaces

Creación y Gestión de GitHub Codespaces en la Nube

Plantillas de Codespaces con Django y devcontainer

Pair programming con Live Share en Codespaces

Uso del Editor Web de GitHub para Edición Rápida de Archivos

Seguridad y buenas prácticas en GitHub

Gestión de GitHub Tokens para Acceso Seguro a Repositorios

Secret Scanning en GitHub y sus límites

Gestión de Seguridad de Paquetes con Dependabot en Proyectos .NET

Repositorios privados y .gitignore en GitHub

Administración de GitHub

Creación y gestión de repositorios en GitHub

Automatización de GitHub Actions para Actualizar Perfil

Gestiona GitHub desde tu terminal con gh

Gestión de Cambios con Pull Requests

Configuración de Proyectos de Software con Git y GitHub

Cómo resolver conflictos de merge en VS Code

Estrategias de Fusión de Ramas en Git

GitHub Releases

Creación de Releases en Github para Desarrolladores de Software

Instala tu paquete pip desde GitHub

Cierre

Pro tips ocultos de GitHub para trabajar mejor

Plantillas de Codespaces con Django y devcontainer