GitHub

Descubre Codespaces, tu espacio personalizado para desarrollar

Publicado por
Sebastián Ramos
Descubre Codespaces, tu espacio personalizado para desarrollar
Escrito por
Sebastián Ramos
Publicado en
September 22, 2023
Tiempo de lectura
Categoría
GitHub

Hoy GitHub es uno de los gigantes tecnológicos más reconocidos a nivel mundial dentro de la industria tecnológica, debido a sus features innovadores que potencian el trabajo de desarrollo en los equipos.

En CleverIT, como equipo experto y partner principal de GitHub en Latinoamérica, usamos y compartimos nuestra experiencia con otros profesionales para que puedan aprovechar su potencial al máximo.

Codespaces es un ambiente de desarrollo alojado en la nube dentro de GitHub, donde puedes elegir dentro de un rango variado de especificaciones de RAM y CPU, según tus necesidades.

Este ambiente está contenerizado dentro de una imagen Docker, la cual contiene:

  • Una copia del repositorio.
  • Los lenguajes y sus librerías.
  • Extensiones y herramientas de nuestro uso común.

Ventajas de usar Codespaces

  • Usa tus configuraciones: Todas los dependencias, librerías y configuraciones listas.
  • Accede a los recursos que necesitas: El procesamiento está del lado de Codespaces, así que podrás usar una maquina física con poca potencia.
  • Trabaja en cualquier lugar: Sólo necesitas un navegador web.
  • Rápido y variado: En un par de minutos puedes tener un ambiente listo para el desarrollo de aplicaciones Node.js y luego probar con un ambiente .NET, simplemente seleccionando una plantilla de Codespaces.

Personalizando tu codespace

Sincroniza tus ajustes

De esta manera no sentirás la diferencia al trabajar en un ambiente en la nube. Podrás importar fácilmente tu tema oscuro de desarrollo, atajos de teclado y tus extensiones de Visual Studio Code.

Contenedores DEV

Todas las configuraciones de tu codespace se guardan dentro de un archivo devcontainer.json (se pueden tener varios). En este archivo podemos alojar muchas configuraciones, tales como:

  • La lista de extensiones de Visual Studio Code que usarás.
  • La lista de archivos que se abrirán automáticamente al entrar en tu codespace.
  • El tipo de consola que deseas ocupar.
  • Ejecución de comandos.

Dockerfile

Este archivo puede ser parte de la configuración de tu codespace. En el siguiente caso, se muestra que se usará una imagen base y se instalarán librerías que estarán disponibles para cuando el codespace se inicie.

a) Archivo “Dockerfile”

b) Archivo “devcontainer.json”

Features

Puedes tener listas ya instaladas y dispuestas para su uso, junto con distintos tipos de extensiones y herramientas como AWS CLI, Azure CLI, GitHub Copilot, Kubectl, o herramientas de linting de código simplemente especificándolo en tu archivo devcontainer.json. En este enlace puedes encontrar una lista más completa.

Cómo usar tu codespace

Ejecuta tu aplicación

No sólo puedes codificar, sino que también puedes depurar y probar tu aplicación sin problemas desde Codespaces. Para ello debes abrir un puerto en tu codespace y elegir su protocolo; incluso puedes definir si quieres compartirlo con tu organización, para lo cual necesitas una cuenta enterprise.

Secretos

Puedes crear secretos para que tus codespaces usen la misma configuración entre todos los miembros de tu equipo.

Colaboración

Utiliza Live Share, una extensión de Visual Studio Code, para crear una sesión de codificación y depuración en grupo a distancia. En esta página puedes conocer más detalles al respecto.

Tips para administrar tu codespace

Límite de gasto

Estos límites pueden ser en términos de uso de procesamiento, de disco o costo general, lo que te permitirá recibir notificaciones cuando llegues al 75, 90 o 100% del límite establecido.

Políticas

Establece qué tipo de imágenes base son posibles de ocupar, qué tipos de máquinas son válidas para Codespaces, el tiempo máximo que puede una máquina estar detenida, qué puertos y con qué permisos pueden exponer los desarrolladores.

Conclusión

Con GitHub Codespaces, es posible un mundo donde las y los desarrolladores puedan enfocarse en su trabajo sin preocuparse por inconsistencias en su entorno de desarrollo, compatibilidad o configuraciones propias del sistema.

Gracias a esta herramienta, los equipos pueden personalizar rápidamente un espacio de trabajo y configurar así el espacio perfecto para cada proyecto. Además de acelerar su proceso de desarrollo, esto también fomenta la innovación al permitir a las y los desarrolladores concentrarse en lo que mejor hacen: crear soluciones de valor para sus clientes.

La capacidad que GitHub y sus herramientas da a los equipos para trabajar colaborativamente es de gran valor para la industria TI, logrando que la creatividad y las buenas ideas fluyan sin interrupciones. ¡El futuro ya está aquí gracias a GitHub!

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Descarga nuestro Clever UI KIT 👇

Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Por rellenar el formulario
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Por rellenar el formulario
¡Ups! Algo salió mal al enviar el formulario.

Crea tu propio manual de marca con esta plantilla gratuita.
¡Organiza tus activos de diseño de forma más eficiente!

¡Potencia tu creatividad con GitHub Codespaces

y revoluciona tu desarrollo!