¡Hola, hola! Soy Miguel Ángel Durán y hoy te traigo un nuevo vídeo para hablarte de GitHub Codespaces
porque por fin, después de un montón de meses esperando, he conseguido acceso anticipado a su beta.
Pero, ¿qué es esto de GitHub Codespaces? Pues básicamente es un entorno de desarrollo completo en la nube.
Y por completo digo completo porque no sólo nos proporciona un editor de código, un Visual Studio Code,
sino que nos da recursos de la máquina. Podemos abrir la terminal, hacer deploy, ejecutar scripts, ejecutar los tests del repositorio
y muchísimas cosas más. Así que, si te interesa, quédate que te lo enseño.
Pues esta es la web oficial de esta nueva funcionalidad de GitHub, GitHub Codespace, que nos va a dar un entorno de desarrollo en la nube.
Ya en el vídeo nos explica un poquito cómo funciona, que tenemos un editor, Visual Studio Code,
que podemos inicializarlo desde un repositorio y que podemos acceder a la terminal, por ejemplo.
Aquí tenemos más ejemplos que podemos codificar, abrir la terminal, que podemos hacer commits desde ese entorno de desarrollo,
hacer pushes a master, crear pull requests. También podemos instalar extensiones.
Y está muy bien porque una vez que la instalas ya se guarda. Esto lo vamos a ver en la demo que vamos a hacer.
Y pues que tienes la posibilidad de programar en diferentes lenguajes. No solo vamos a hacer en Node.js, JavaScript, sino RAS, TypeScript.
Soporta todo tipo de lenguajes. Eso no es un problema. Y finalmente aquí tenemos un botón muy grande,
por si queréis activar el acceso anticipado para la beta. Se pondrá en la cola. A mí me ha tardado unos meses,
pero bueno, quizás tienes un poquito más de suerte. Le podéis dar aquí. En mi caso le voy a dar, pero ya me dice que lo tengo activado
y que puedo crear mi primer Codespace ahora, que es lo que vamos a hacer para ver cómo funciona.
Ahora mismo no tengo ninguno creado, así que le voy a dar Create your first Codespace y voy a elegir el repositorio
en el que quiero generar este entorno de desarrollo. En mi caso voy a elegir mi blog. Vamos a ver cómo funcionaría con mi blog.
También tenemos que elegir una rama, aunque esto no es importante, o sea, nos va a crear el Codespace con esta rama,
pero luego dentro del Codespace veremos que podemos cambiar a otra rama, incluso crear una nueva.
Vamos a empezar en Master. Voy a darle a Create Codespace y esto creará el Codespace. Ya lo está haciendo,
ya vemos que está cargando, que está preparando el Codespace, que lo está inicializando y esto a partir de Master
del repositorio de mi blog. A veces, aquí me parece este error que creo que es de Chrome,
porque cree que la URL que ha generado GitHub es para intentar engañarme y que está atacando, ¿no?
Y se cree que es mi dominio, pero como se parece mucho, entonces si os aparece este error,
y trabajando en esto con el GitHub Codespace, pues nada, le dais a Ignore y ya está.
Y ahora volverá a inicializar el Codespace. Se está conectando. Este es el error, me imagino,
que la URL se parece un poco a mi dominio, pero con un guión, el guardo un punto por aquí,
y quizás cree que eso está intentando atacarme. Bueno, ya estamos viendo el editor, que está basado
en Visual Studio Code, que todo el mundo lo debe conocer o le debe sonar, aunque no lo utilice.
Ya me ha abierto el fichero readme.md, el de Markdown, que este digamos que es lo que tengo ahora mismo
en master, está configurando el espacio de código, pero ya podemos empezar a ver todo el código,
todos los archivos que tenemos, lo podemos ir abriendo. Podemos ver aquí que ya tenemos
el syntax highlighting, que tenemos diferentes cosas, aunque los colores que vienen por defecto
son los de GitHub. Esto también lo podemos cambiar. Pero por ahora vamos a probar ya rápidamente
cómo funcionaría esto. Esto es el código que tenemos en master, así que ya he hecho un clon
del repositorio y ya lo tenemos disponible. Entonces este es el repositorio, el que me
he clonado. Y aquí podemos ver que tengo Twitter, YouTube, Instagram, Facebook, y me gustaría
añadir también GitHub. Lo vamos a hacer a partir del Codespaces. Así que vamos a añadir
aquí GitHub. Vamos a poner el Octopus y voy a poner mi dirección. Voy a hacer esto un poco
más grande para que se vea bien. Voy a poner GitHub barra midu dev. Voy a guardar los cambios.
Y aquí a la izquierda, como un Visual Studio Code, tenemos el apartado donde podemos ver
el control, el source control, para ver cómo tenemos nuestro código, los cambios que hemos
hecho. Aquí podemos ver que el readme ya ha hecho un cambio, que ha añadido esta línea.
Ahora podría crear un commit. Add GitHub link. Y simplemente, bueno, primero vamos a poner
en stage este cambio. Este sería el mensaje del commit. Voy a hacer que esto esté ya disponible
para hacer push. Ahora todavía hemos hecho el commit. Ya lo tenemos añadido, pero todavía
no hemos hecho push a master. Aquí abajo puedes ver que tenemos tanto para sincronizar los cambios,
tanto para bajarlos o para subir los que hemos hecho. Así que le vamos a dar. Nos va a preguntar
que esta acción va a hacer push de los cambios. Así que le vamos a dar OK. Y ya estamos haciendo
un push a la rama de master con estos cambios. Se está sincronizando. Bueno, aquí me va
a preguntar si quiero hacer un git fetch periódicamente de los cambios que pueda haber en el repositorio.
Le voy a decir que sí, para que esté bastante sincronizado. Pues ya está. Ya hemos hecho
un push a master desde este entorno de desarrollo en la nube. Lo hemos hecho desde la web.
Si voy ahora al repositorio y refresco la página, ahora puedo ver cómo tengo aquí este link
de GitHub que he añadido. Así que hemos hecho un cambio a master. Lo hemos pusheado con un git
commit, un git push. Todo desde el entorno de desarrollo desde una página web, que no está
nada mal. Vale. He dicho que podemos cambiar un poquito el cómo se ve. Y podemos ir a las
preferencias y podríamos buscar theme. A ver si era theme. Sí. Y aquí teníamos el color theme
y cambiar y poner, por ejemplo, pues otro como puede ser monokai, que es más oscuro. A ver
si ahora hace el cambio. Perfecto. Podemos poner diferentes. Pero imaginemos que no nos gusta
ninguno de estos. No sé. A mí me gusta GitHub Dark. No está mal. Pero hay otro que me gusta más,
¿no? Que es One Dark Pro. Pues se puede instalar. Porque podemos instalar todo tipo de extensiones.
Por ejemplo, aquí ya tengo la lista de extensiones. Voy a poner One Dark Pro y aquí me aparece. Le voy
a dar install. Está instalando. Me dice que se tiene que recargar para poder terminar la instalación.
Pues lo vamos a hacer. Y puedes ver que se reinicia. Tarda muy poquito en iniciarse el code space,
pero necesita reiniciarse. Bueno, algunas extensiones será necesario. Hay otras que no. Vamos
a volver a settings. Y ahora aquí en theme. Vean, vamos a cambiar aquí este GitHub Dark. Ahora
sí que tenemos este One Dark Pro. Y ya tenemos el One Dark Pro. De hecho, si voy al markdown,
pues podréis ver que me ha cambiado bastante los colores. Unos que me son más familiares. Pues
en One Dark Pro puedo cambiar también las preferencias de esta extensión. Por ejemplo, que tenga
las negritas, que tenga el estilo vivid, que es como los colores más vivos. Voy a hacer
un reload otra vez. Se vuelve a resetear. Nada, tarda dos segundos. ¿Cómo tardaría? Lo
mismo cuando lo hacemos en local. Y ahora, pues si voy al Readme, pues puedo ver que, bueno,
se han cambiado un poquito. No se notan mucho los cambios, pero aquí estaría ya utilizando
las negritas y todo esto. Podemos ir aquí en One Dark y podemos ver que se ha guardado la
configuración que hemos hecho antes. Esto es importante porque ahora que hemos dejado
este editor como a nuestro gusto, una vez que entremos a este Codespace siempre tendrá
estos colores. O sea, por ejemplo, yo puedo cerrar este Codespace. Pongamos que me voy
y vuelvo a otro día. Y aquí en Code ahora tenemos una nueva opción que es Open with Codespace.
¿No? Donde haríamos el clon o descargar el zip, que eso quizás no lo usamos tanto, pero
usamos más el clonado. Ahora podemos abrir el Codespace directamente desde aquí.
Open with Codespace. Podemos crear uno nuevo, podemos tener más de un Codespace para un
repositorio, podemos tener un montón. En este caso, pues pone que hace 40 segundos he usado
este y que lo he creado hace 6, pues vamos a reutilizarlo. Lo abrimos desde aquí, ya se
conecta al Codespace, tarda muy poquito y ya tenemos otra vez este editor en la nube con
todo el entorno de desarrollo, ¿no? Porque hasta ahora hemos visto sobre todo la que es
la funcionalidad del editor, que está muy bien. Pero vamos a ver algo que es todavía
más sorprendente. Para ello, vamos a hacer una cosa. Voy a cambiar de rama. Estoy en
Master y aquí abajo le podemos dar a Master y cambiar de rama. Tengo desde hace mucho tiempo
un artículo pendiente sobre las semicolons y JavaScript. Así que voy a cambiar esa rama,
que es donde tengo este post, que lo tengo a medias. Y aquí en Content, Post, por aquí,
si no, lo podemos buscar directamente. A ver, JavaScript. ¿Por qué no uso punto y coma en
JavaScript? Este es el contenido, justamente. Vale, pues es este, ¿no? ¿Qué pasa? Que lo tengo
aquí escrito desde el 4 de... el 22 de abril. Debería ponerme las pilas y actualizarlo. Vamos a
poner que lo quiero sacar el... que lo quiero poner como que ha sido el 15 de agosto, ¿no? Para que sea
un poquito más reciente. Ahora, claro, alguien podría preguntar, bueno, esto está muy bien, que tienes el
editor aquí, pero no puedes ver los cambios, ¿no? Lo que sería realmente interesante es que yo
pudiese levantar el entorno de desarrollo de este blog y ver cómo quedaría mientras trabajo sobre
él. Bueno, pues lo que se puede hacer es, podemos abrir en la terminal y aquí podemos tener acceso
directamente a la máquina. O sea, podemos trabajar sobre la máquina. Aquí puedo hacer un npm run y es
que aquí puedes ver que ya me he instalado las dependencias de este proyecto. Ya he hecho un npm install y
me he instalado todas las dependencias de mi blog. De forma que ya mis scripts, como por ejemplo el
del modo desarrollo, va a funcionar directamente. Ya me ha instalado node, de hecho tengo la versión
12.16. Ya me ha instalado npm, como funciona directamente. O sea, ya ha detectado que era un
proyecto de Node.js y se ha encargado de solucionarlo por mí. O sea, ya me ha instalado todo. Así que cuando ha
levantado el entorno de desarrollo no es sólo que nos genera la imagen, sino que ha instalado las
dependencias y ha instalado también las herramientas que necesitamos para trabajar. De esta forma, ahora
podríamos hacer un npm run dev y esto nos va a crear el entorno de desarrollo de mi blog. En mi caso
estoy utilizando Hugo, pero podría ser Next.js, podría ser cualquier otra cosa. En este caso me ha abierto
una url en localhost en el puerto 1313. Y claro, aquí pues dices, bueno, está en localhost. ¿Yo cómo
accedo exactamente a esto? Pues si dejamos pulsada la tecla Command, en el caso de Mac, creo que en
Windows sería Control, y hacemos clic, va a seguir el link. Y cuando sigue el link ocurre una cosa muy
interesante. Y es que genera una url que básicamente va a redireccionar ese localhost interno de la
máquina para que podamos acceder desde nuestro ordenador, desde nuestro navegador. De hecho,
aquí tenemos este por qué no uso punto y coma en JavaScript. Esta url nos la está proporcionando
el Codespace. De hecho, aquí podéis ver Codespaces. Si vamos a mi blog, pues tengo el logo nuevo,
aquí tengo el antiguo porque no tengo los últimos cambios. De hecho, cuando escribí este artículo tenía
5600 seguidores y ahora llevamos por 12.000. Pero lo interesante y lo que quiero que veas es que
podemos levantar el entorno de desarrollo y ese servidor que estamos levantando en localhost es
totalmente accesible desde tu navegador utilizando este forwarding que hace, ¿no? Accediendo a este
localhost, entrando directamente y esta url que te genera puedes ver ese entorno de desarrollo y
puedes ir haciendo cambios. Por ejemplo, vamos a ver aquí este por qué no uso punto y coma. Pongamos
que no me gusta el nombre, ¿no? He hecho la razón por la que no uso punto y coma en JavaScript, ¿no? Y cambio
esto. He guardado el archivo, se genera este cambio y ahora si voy aquí a mi... Bueno, ahora este se ha
quedado un poco... Vamos a volver a entrar. Si volvemos a entrar, veremos que se reflejan los cambios. Así que
los cambios que estoy haciendo realmente se ven reflejados en esta url. Y esta url solo es accesible
desde el Codespace. Hay un montón de posibilidades, solo he hecho muy poquitas cosas, como por ejemplo el
hecho de que puedes tener un repositorio con .files, un repositorio dentro de tu usuario, que sea en mi
caso midudez barra .files. Y lo que va a hacer este Codespace es que va a recuperar la configuración...
Todavía no lo tengo hecho, pero va a recuperar la configuración que tengas dentro del .files para
utilizarla a la hora de crear el Codespace. También, esto no es un tema de Codespace, pero sí que es un
tema de Visual Studio Code, se puede llegar a configurar las extensiones que tiene que instalar
desde el principio. Se puede crear un archivo que se llame devcontainer.json y aquí podríamos llegar
a configurar qué extensiones, qué configuración debería tener este Visual Studio Code nada más
crearse. De forma que este archivo lo podemos tener en nuestro repositorio y cuando alguien cree o genere
un Codespace de nuestro repositorio, ya tendría todas las extensiones que necesita para trabajar
en nuestro repositorio. Pues hasta aquí el repaso de GitHub Codespaces. Espero que os haya gustado y me
gustaría saber vuestras ideas dónde le veis utilidad a esto. Porque es verdad que puede ser que pensemos
en situaciones de emergencia, donde no tenga mi ordenador a mano y así poder trabajar desde cualquier
sitio. Y tiene sentido. Pero lo cierto es que también creo que puede ser interesante, por ejemplo,
en una empresa, ¿no? En una empresa donde en lugar de hacer el onboarding, de tener que instalar todas
las herramientas, SSH Key, Git, Visual Studio Code, pues el hecho de tener esta posibilidad de tener tu
entorno de desarrollo replicable en la nube me ha parecido muy interesante, ¿no? Porque serías productivo
casi instantáneamente. Y estoy seguro que se nos van a ir ocurriendo más posibilidades de GitHub
Codespaces. Creo que también a lo mejor para participar en algún proyecto de forma rápida,
pues en lugar de tener que clonarte el repositorio y el local, hacer todo lo que tengas que hacer,
pues directamente forkearlo, crearte un Codespace y hacer ese cambio pues directamente desde el
navegador. Le veo posibilidades. Es verdad que no lo veo en nuestro día a día. Creo que todavía tenemos
muchas cosas que hacer en local, pero le veo posibilidades. Y me gustaría pues que me comentases
tú qué posibilidades le ves o qué idea le encuentras, si te apasiona, si te ha gustado,
si no le ves utilidad, pues déjalo en los comentarios aquí abajo y así pues discutimos un poquito sobre
esto. Así que espero que te haya gustado el vídeo. Ya sabes, deja tu like que ayuda un montón,
comparte con tus colegas pues el vídeo para que sepan de GitHub Codespaces. Y por supuesto,
si no estás suscrito ya, suscríbete al canal, suscríbete, dale a la campanita para no perderte
este y los siguientes vídeos que va a haber aquí sobre Frontend en Midudev. Muchas gracias
por estar ahí y hasta el siguiente vídeo. ¡Hasta luego!