¡VS Code puede hacer eso!

Gracias a todos por venir. Me gustaría comenzar con una pequeña historia antes de adentrarnos en VS Code específicamente. Hay una leyenda de que hace mucho tiempo, había un problema de falta de electricidad en la ciudad de Nueva York. Con esto, decenas de miles de hogares se quedaron sin electricidad. ¿Qué hicieron? Llamaron a Thomas Edison para que viniera y nos ayudara con esto. Thomas Edison llega, observa la situación y dice: `Sabes, creo que sé qué hacer`. Va y mira la pared, presiona un botón y toda la electricidad se enciende en toda la ciudad. Es genial. Recuperamos la electricidad. Le agradecen mucho por hacer esto. Él responde: `No hay problema`. Y les entrega una factura por sus servicios. Y es por $10,000. Lo cual es mucho dinero en ese momento. Ellos dicen: `Estamos agradecidos y todo, pero todo lo que hiciste fue presionar un botón`. Y él responde: `Entiendo, tienen razón`. Déjenme revisarlo. Ellos dicen: `Muchas gracias`. Entonces él revisa la factura y la cambia a un dólar por presionar el botón. Y luego $9,999 por saber qué botón presionar. Y esa es realmente la moraleja de la historia aquí. No se trata de presionar un botón en VS Code. Se trata de saber qué botón presionar para ser eficientes.

Y en VS Code mi botón favorito es F1, que funciona en todos los productos en Mac, y Windows, y Linux. O Command-Shift-P en un Mac hoy es lo que usaré. Y eso muestra la paleta de comandos dentro de VS Code porque VS Code puede hacer eso.

Y mi nombre es John Papa y hoy vamos a mostrarte una serie completa de consejos que puedes usar hoy con VS Code y algunas cosas que tal vez no sabías que podías hacer trabajando mañana. Así que comencemos justo allí con la versión Insiders. Ahora hay una versión estable que suena como, hey, es estable, ¿verdad? Hay que usarla. Y eso sale una vez al mes. Pero hay una versión Insiders que te brinda prácticamente actualizaciones diarias de código diferente. Entonces, en esa versión Insiders, simplemente haz clic aquí para descargar el Insiders estable para tu plataforma. Obtienes características actualizadas todo el tiempo. He estado usando esto desde el primer día. Nunca usé la versión estable. Solo usé la Insiders y en realidad es bastante estable. Así que lo llamaría una versión estable de Insiders y te recomiendo que lo pruebes.

Ahora todos necesitan encontrar archivos. Una de las cosas buenas en VS Code es que puedes encontrar archivos a través del árbol donde puedes buscar en el Explorador usando tu mouse y trackpad. O puedes usar la paleta de comandos. Recuerda esa combinación de teclas que dije que debes recordar, si vas a command shift P, encontrarás todos estos comandos. Bueno, también hay un comando P. Esa es una opción de menú para encontrar un archivo rápidamente. Así que digamos que quieres encontrar un archivo de enrutador. Puedes ver que escribí enrutador allí arriba y hace coincidencia parcial de nombres de archivo. También puedes usar las teclas de flecha para subir y bajar. Así que es una excelente manera de encontrar archivos rápidamente por nombre. También puedes pasar la ruta a ese nombre. Por ejemplo, si tienes muchos archivos en tu proyecto llamados index.html o index.js, puedes escribir eso. Puedes encontrar muchos de ellos. Pero si pones la ruta hacia ellos para las carpetas, se reducirá para ti.

Otra cosa que me gusta mucho de esto es la personalización del diseño. Aquí, te darás cuenta en este video que me deshice de todas las distracciones.

Me deshice de la barra de título, la barra de estado, todo. Solo estoy viendo mi código. Esto se llama modo Zen. Entonces, si vas a Command-Shift-P y escribes Zen mode, automáticamente se deshará de todo eso y centrará el código para ti.

Luego también puse varios paneles aquí. Así que tengo dos archivos abiertos al mismo tiempo. Los coloca a ambos en modo Zen. Y si quiero, aún puedo acceder a cosas como el explorador de archivos para buscar otros archivos o hacer otras cosas si es necesario. Así que hay una excelente manera de acceder a todo eso.

Y luego, si quieres salir del modo Zen, haces Command-Shift-P. Luego puedes desactivar el modo Zen. Otra cosa que me gusta mucho son las terminales externas. A veces quieres usar ITerm o la terminal incorporada en tu sistema operativo. Si estás dentro de tu aplicación de VS Code, lo que puedes hacer es abrir automáticamente una terminal en la carpeta actual. Entonces haces eso con Command-Shift-C, y eso abrirá automáticamente una terminal, sea cual sea tu terminal predeterminada, en la carpeta en la que estés trabajando. Y no te preocupes si olvidas estos comandos y atajos de teclado. Solo recuerda, Command-Shift-P o F1, ese es el único atajo de teclado que puede mostrarte todas las opciones de menú. Solo escribe Command-Shift-P, escribe terminal, y verás todos los comandos para esto.

Ahora, VS Code viene con su propia terminal integrada también. Y puedes abrir eso con este atajo de teclado, puedes elegir tu shell como Bash o Zush o PowerShell. Así que puedes hacer lo que quieras allí. Y luego también puedes apilar tus terminales donde puedes tener varias terminales abiertas al mismo tiempo. Lo cual es increíblemente útil. Veremos eso un poco más adelante en algunas de las demostraciones. La depuración funciona de manera predeterminada en múltiples plataformas. Aquí puedes ver que no estoy depurando. Así que puedo iniciar el depurador con la tecla F5. O puedo ir y presionar el botón, el botón verde. Puedo establecer puntos de interrupción en todo el código, como me ves aquí. Ejecutar hasta otro punto de interrupción.

Luego puedo pasar por encima. Y luego voy a hacer clic derecho y establecer un punto de interrupción de columna o un punto de interrupción en línea en el JSON. Así que justo ahí, puedo detenerme y especificar el valor. Esto es genial para async await u otros tipos de comandos que son asíncronos.

Ahora, la depuración de JavaScript en el front-end. Me encanta el front-end, CELT, y React, y Vue, y Angular, todos estos. Ahora, lo genial es que realmente puedes depurar esos directamente dentro de VS Code. Así que podemos depurar en un navegador o hacerlo directamente en la misma herramienta en la que estamos. Ahora hay una extensión de depuración para Edge y otra para Chrome, dos de ellas. Una para cada navegador. Si cargas esas extensiones, puedes configurarlas, iniciar tu depurador, y luego establecer puntos de interrupción. Y podemos ver que estamos estableciendo el punto de interrupción allí.

Ahora estamos configurando nuestro entorno. Vamos a decir, ve a Chrome para el depurador de Chrome. Estoy llenando automáticamente la configuración de Chrome para depurar Vue. Y luego voy a establecer un punto de interrupción dentro de mi componente Vue. Voy a iniciar mi aplicación. Y luego aquí puedes ver que mi aplicación se está ejecutando. Presiono eliminar y luego se activa el punto de interrupción. Bastante genial.

Ahora, una de mis características favoritas es el multi-cursor. Command-D lo hará por ti. Así que fíjate aquí, lo que hice fue seleccionar tres líneas de código del package.json Y luego tengo tres cursores en marcha. Busqué algo similar en los tres. Y luego los junté y les agregué npm install delante. Veamos esto de nuevo. Así que lo que hice fue querer obtener un comando npm install usando estas tres líneas de código. Las copié en un archivo en blanco. Luego busqué todo lo que tenía comillas, dos puntos, espacio, comillas. Y ese cursor luego los encontró.

Y luego puedo eliminar, retroceder. Y luego también puedo agregar un nuevo espacio allí. Así que puedo ejecutarlos. Y es realmente genial para editar archivos, cuando necesitas encontrar muchas cosas diferentes en todo el archivo. Así que ese multi-cursor es muy poderoso.

Los snippets son otra gran característica. Hay diferentes bibliotecas por ahí, como Angular, y React, y Svelte. Y también tienes cosas como Docker. Podemos usar snippets, así que no tenemos que recordar toda la sintaxis de todas estas cosas diferentes. Así que aquí estamos viendo que no recuerdo la sintaxis de Dockerfile. Así que tengo un snippet de Docker que configuré para mí, que automáticamente creará una configuración de contenedor Docker y un Dockerfile para mi aplicación de Angular.

Y también hay una gran cantidad de correcciones rápidas. En cualquier lugar de VS Code donde veas una bombilla, puedes hacer clic automáticamente en ella con el mouse o el trackpad. O puedes presionar comando punto. Y lo que hará ese comando punto es que te dará una pista sobre qué te gustaría cambiar en esto. Por ejemplo, aquí abajo, la función CatchError, no sabía qué era. Así que podemos hacer clic en ella o presionar comando punto, y automáticamente importará CatchError desde la biblioteca RxJS. Porque vio que estás usando RxJS, pero no importaste esa cosa aquí. Así que déjame ayudarte. Hay muchas cosas geniales que el comando punto hará. Corregirá la sintaxis. También hará correcciones de ESLint, como cambiar un let a un const si quieres hacer eso, y algunas otras sugerencias también.

La refactorización básica está incorporada. Así que podemos buscar referencias. Aquí estoy buscando todas las referencias a esta clase de módulo compartido en mi aplicación, y también puedo cambiar el nombre del símbolo. Tal vez quiero cambiarle el nombre a mi módulo compartido, y quiero hacer una búsqueda y reemplazo. Así que puedo cambiarlo aquí. Luego se abrieron automáticamente todos los lugares que cambiaron. Ahora quiero buscar referencias nuevamente. Puedes ver que todos esos lugares realmente cambiaron.

También puedes revisar el registro de cambios de Git para ello. También estás viendo la función de peek, que te permite echar un vistazo a otros archivos que están utilizando esa funcionalidad diferente. Y si hago doble clic allí, iría a ese archivo. Hablando de Git, hablamos de los cambios de Git. La integración de Git está incorporada en vscode, y hay un par de extensiones realmente buenas que definitivamente recomiendo que obtengas, y te mostraré algunas de ellas en una demostración en un momento. Aquí estamos viendo la extensión de solicitud de extracción, y lo que puedes hacer es clonar directamente, sin necesidad de una extensión, hacer check out, commit y push. Todo eso está incorporado en vscode, pero también puedes descargar una solicitud de extracción y revisar el código y luego fusionarlo o agregar comentarios, etc. Una extensión que mencioné anteriormente se llama Peacock. Es una que he escrito yo. Así que vscode es una característica realmente genial porque puedes abrir múltiples vscodes. Aquí puedes ver que tengo seis instancias de vscode abiertas. ¿Alguna vez has tenido tantas abiertas antes y estás tratando de averiguar cuál es cuál? Cuando tienes múltiples ventanas de una herramienta abiertas, es genial, pero a veces te confundes. Por ejemplo, puedo estar trabajando en múltiples proyectos. Todos podrían estar interrelacionados, tal vez un backend o frontend, tal vez también un escenario de prueba o un entorno. Así que todos esos podrían estar abiertos y luego muy pequeños en la parte superior de la barra de título, te dice cuál es el nombre de eso. Eso no es lo suficientemente rápido para reconocer cuál es cuál. Así que en su lugar, puedes usar Peacock y luego colorear cada instancia individual con el color que quieras. También puedes colorear diferentes aspectos de la ventana. Así que te facilita ver de un vistazo en cuál estás trabajando. A mí me gusta colorearlos según en qué estoy trabajando. Para Svelte, uso naranja, para Angular uso rojo, para React uso azul. Ahora, acabamos de ver muchas formas geniales en las que podemos facilitar nuestras vidas con VS Code, pero uno de los mayores problemas que la mayoría de nosotros tenemos es cuando vamos a un proyecto y necesitamos todas las dependencias para ese proyecto. Diferentes frameworks y diferentes configuraciones como Node o Python o .NET y todo tipo de dependencias. Aquí es donde puede volverse difícil y donde las soluciones basadas en contenedores realmente pueden ayudarnos. Podemos llamar a estos contenedores de desarrollo y VS Code lo admite. Entonces, ¿qué significa esto? Bueno, primero hay tres cosas que necesitas para empezar. Uno es VS Code en sí mismo. Puedes obtener VS Code desde este enlace aquí. En segundo lugar, querrás Docker para escritorios. Puedes obtenerlo desde este enlace para poder ejecutar los contenedores.

VS Code simplemente se integra con eso para ti. Ahora, también necesitamos esta extensión que funcionará en VS Code. Se llama la extensión de containers remotos y la veremos mucho en algunas demostraciones que vienen. Así que vamos a configurar algunos escenarios aquí.

Estás comenzando un nuevo proyecto y ¿cuáles son las primeras cosas en las que piensas, especialmente cuando te estás adentrando en un proyecto que tal vez no creaste? ¿Y si pudieras comenzar cualquier nuevo proyecto y quieres que tu entorno de desarrollo simplemente funcione para ti? Quieres dárselo a alguien y decir, bien, todo lo que necesitas ya está listo para usar. No tienes que preocuparte por la versión de Node o Go o Python o cualquier otra cosa que estés usando. Puedes obtener instantáneamente las herramientas que necesitas y no solo una plataforma, sino también las extensiones que necesitas en VS Code y cualquier otra configuración que debas hacer. ¿Y si pudieras compartir todo esto para que otras personas simplemente puedan clonar tu repositorio desde GitHub y que funcione instantáneamente? Esa es más o menos la idea detrás de los containers de desarrollo. Obtienes un entorno completo de VS Code, incluyendo tus extensiones, depuración, completado de código, todas tus dependencias listas para usar desde el principio. ¡VS Code completo, ¿verdad? Eso es lo que realmente queremos. No tenemos que preocuparnos por, oh, ahora tengo que pasar las próximas dos horas instalando todo lo que necesito y asegurándome de que las versiones coincidan. Así que vamos a obtener esta extensión llamada Containers Remotos y la vamos a usar en VS Code para recorrer un par de escenarios.

Entonces, la primera demostración, haremos tres de estas, es que queremos clonar y ejecutar una aplicación de Python. Te han dado esta aplicación de Python y ahora necesitas hacerla funcionar. Así que vamos a sumergirnos en algo de código. Aquí estoy dentro de VS Code y puedes ver que no tengo nada abierto en este momento. Lo que vamos a hacer es asegurarnos de tener Docker en nuestras máquinas y puedo hacer clic aquí arriba primero para ver que de hecho tengo Docker instalado. Está justo ahí. Si no lo tienes, puedes hacer clic en ese enlace para cargarlo. Tengo VS Code porque lo estamos viendo y si voy a las extensiones puedo venir aquí y escribir remoto. Puedes ver que ya hay una extensión de contenedor remoto instalada en la parte superior. Si no lo estuviera, simplemente haría clic en el botón de instalación. Así que mis dependencias están ahí. Ahora tengo este repositorio que ya he creado en GitHub y quiero clonarlo. Así que voy a usar git clone para ir a buscar mi repositorio. Puedo decirle que clone desde GitHub y va a buscar JohnPapa slash y este se llama mslearnpythonproducts Ahora me va a preguntar dónde ponerlo. Lo pondremos en mi carpeta de git. Ahora lo está clonando y quiere saber si quiero abrirlo en esta ventana. Bueno, me gustaría hacer eso, por favor. Así que aquí vamos.

Tengo mi aplicación de Python. Y aquí podemos ver mi archivo app.py. Y tal vez no sé mucho sobre Python, así que lo siguiente que quiero hacer es averiguar que probablemente haya dependencias y cosas que necesito cargar y tengo que configurar esto.

Bueno, antes de llegar allí, primero quiero asegurarme de configurar esto usando Peacock para poder identificar mi ventana. Mencioné la extensión Peacock que instalé a través de las extensiones y podría cambiar esto a un color favorito y simplemente lo llamaré de manera diferente. Es como un tono de rosa, tal vez aquí mismo. Así que eso soy yo ejecutando mi aplicación y puedo ver que ahora está usando rosa.

Ahora no tengo Python instalado, así que lo que puedo hacer es usar un contenedor de desarrollo. Así que voy a presionar mi comando favorito. ¿Recuerdas ese botón? F1 o Comando Shift P. Justo aquí para abrir mi paleta de comandos. En la paleta de comandos, lo que quiero hacer es agregar un contenedor de desarrollo así. Ahora cuando agrego esto, va a agregar un archivo para configurar mi contenedor de desarrollo. Ahora le digo lo que quiero usar. Observa que ve que estoy usando Python, así que me está dando algunas pistas. Voy a elegir Python 3. Y voy a elegir Python 3.9 y luego pregunta ¿quieres instalar también node con eso? Claro, ¿por qué no? Me gusta node. Ahora abajo nos dice en una ventana que ya está creando un contenedor para nosotros. Ahora hemos pasado a que podemos abrir este proyecto en ese contenedor de desarrollo. Ahora hagámoslo ahora mismo. Reabrir en contenedor. Observa que está parpadeando y luego nos dice que está iniciando el contenedor. ¡Boom! Ahora también hay un mensaje que dice que el contenedor cambió. Es posible que necesites construir el contenedor para aplicar los cambios. Así que primero, antes de hacer eso, vamos a ver esta carpeta de contenedor de desarrollo. Lo agregó a nuestro proyecto. Y aquí tenemos un archivo docker. Ahora no tenemos que preocuparnos demasiado por el archivo docker. Básicamente configura todo para que Python funcione sin problemas. Ahora podemos modificar esto si queremos.

También vemos este archivo JSON del contenedor de desarrollo. Ahora es donde configuramos el contenedor de desarrollo. Esto automáticamente dice que use el archivo Docker. Instala node. Tiene todas estas configuraciones. Estas son las configuraciones de VS Code. Se configurará automáticamente para que usemos Python. Y está instalando estas dos extensiones de Python que son muy útiles.

Ahora, observa que tenemos este comando aquí abajo llamado post-creación. Está comentado. Esto es lo que Python usa para instalar automáticamente cualquier requisito. Y de hecho, tenemos requisitos en nuestro archivo de texto de requisitos aquí. Así que voy a descomentarlo.

Ahora, voy a elegir reconstruir mi contenedor. Así que vuelvo a mi paleta de comandos. Puedo elegir reconstruir el contenedor, así de fácil. Y ahora se volverá a abrir el contenedor. Pasará por eso, configurará el contenedor. También ejecutará ese script de requisitos de Python para mí, y podemos ver la salida en la parte inferior de la pantalla. Una vez que haya terminado, podemos cerrar la terminal.

Dice, ahora, si queremos probar esto, podemos ir a app.py aquí mismo. Y vamos a establecer un punto de interrupción en la línea 12. Ahora, observa por un momento, haremos una pausa rápida aquí que había configurado mi entorno para que fuera rosa. Bueno, ya no es rosa. Eso es porque estoy en el contenedor remoto. Si miramos en la parte inferior izquierda de la pantalla, justo allí, podemos ver que dice que tenemos este contenedor de desarrollo llamado Python 3. El tuyo también debería verse así. Pero queremos ver algo un poco más visible para notar que estamos en este contenedor. Así que voy a abrir Peacock de nuevo. Voy a cambiar el color para que sea simplemente amarillo.

¿Por qué no? Así que estoy en el contenedor. Será de color amarillo. Cuando se ejecuta localmente en mi computadora, será de color rosa. Así es Peacock. No solo tenemos diferentes instancias de VS Code, también podemos tener la misma instancia cuando está dentro de un contenedor, con un color diferente cuando no se está ejecutando localmente.

De acuerdo, ya tenemos Peacock configurado. Ahora establezco un punto de interrupción aquí. Ahora, observa cuántos problemas de subrayado tiene Flask. Eso es porque Python instaló los requisitos en este archivo para mí. Usando el contenedor de desarrollo. Vamos a volver a nuestro archivo app.py. Y ahora podemos hacer clic en debug. Podemos elegir ejecutar y debug. Si queremos, podemos simplemente presionar F5 así. Se iniciará y dirá, `oye, ¿te gustaría usar el archivo actual que está abierto?` Sí. Y ahora se está ejecutando ese archivo. Y dice, `oye, se está ejecutando en el puerto 5000 dentro del contenedor.` Luego reenviará ese puerto para que podamos abrirlo en nuestro navegador, lo cual abriré en una ventana aquí. Y lo pondremos en la esquina superior izquierda. Y observa que aún no se está cargando porque alcanzó nuestro punto de interrupción. Así que ahora puedo pasar el cursor sobre data justo ahí. Y deberíamos ver todos los data que se devuelven. Lo dejaré continuar. Si vuelvo al navegador, podemos ver que está ahí mismo. Y ahí están todas nuestras herramientas tal como queríamos que funcionara.

Ahora tenemos todo funcionando dentro del propio contenedor. Ahora, si me desconecto del depurador. Ahora lo que puedo hacer es volver a la paleta de comandos. Voy a decir `reabrir carpeta localmente`. Esto cerrará el contenedor y volverá a ejecutar el proyecto de Python localmente en mi máquina.

Y solo para señalar esto realmente. Aquí hay dos cosas que deberían cambiar drásticamente. Uno, el color cambió porque estoy usando Peacock y nos dice que estamos en local, es un color diferente. Y dos, ahora me está diciendo en la esquina inferior derecha que esto contiene un contenedor de desarrollo. Y si quiero, puedo volver a abrirlo ahora. Y si ese mensaje desaparece, no hay problema. Puedo hacer clic en el icono en la esquina inferior izquierda o puedo volver a la paleta de comandos. Y simplemente decirle que continúe y podemos decirle que vuelva a abrir en un contenedor. O volver a abrir y reconstruir si queremos. Así que acabamos de ver cómo usar una aplicación de Python y configuró todas las dependencias de desarrollo en el contenedor. Ahora vamos a abrir otra aplicación directamente desde GitHub con un contenedor de desarrollo. Así que estoy de vuelta en VS Code. Vamos a ejecutar la paleta de comandos y elegir clonar un repositorio directamente en un contenedor de desarrollo. Ahora resulta que tengo un repositorio, que buscaré. Y este aquí arriba será de John Papa y tiene gh static end to end. Ahora me preguntará qué rama quiero usar. Quiero usar esta rama de actualización de contenedor. Es bueno tener opciones. Ahora carga este contenedor de desarrollo. En realidad, está descargando este código en un contenedor de desarrollo localmente en mi máquina. Así que observa que me salté todo el proceso, vamos a crear una carpeta en mi máquina local para hacer todo esto porque está dentro de un contenedor de desarrollo. Así que el siguiente paso que quiero hacer es revisar dentro de la terminal. Esto usa react y Azure functions. No tenía las funciones instaladas localmente. Así que si ejecuto func aquí mismo dentro de su terminal, podemos ver que ya tiene las funciones de Azure. Eso se debe a que el propio contenedor de desarrollo ha configurado todas estas cosas, incluida la extensión de funciones de Azure y las herramientas principales del archivo Docker que tenía. Eso es bastante genial. Así que me proporciona todas las dependencias que necesito. Lo siguiente que quiero hacer es ir a mi terminal y escribir npm start. Eso ejecutará mi aplicación de react.

También tuvimos una instalación de yarn para esto. Ahora, si abro esto en el navegador, la aplicación de React no se cargará correctamente. Eso se debe a que no hay datos. Bueno, tiene una aplicación de funciones. Así que voy a bajar aquí, presiono Comando barra, abro una segunda terminal. Y ahora lo que quiero hacer es ejecutar 'func start' o simplemente puedo presionar F5, se ejecutará automáticamente mis funciones. Y ahora podemos ver que las herramientas principales se están cargando y se están ejecutando aquí. No quiero navegar a ellas. En su lugar, quiero volver a mi aplicación de React y quiero hacer clic en actualizar. Y ahora están todos mis datos. Ahora, observa que el puerto aquí es 3000. Estamos haciendo reenvío de puertos. Así que si quiero, puedo hacer clic en este pequeño icono en la parte inferior de la pantalla, mostrar todos los puertos o simplemente hacer clic en puertos ahí mismo. Ahora podemos ver que se está reenviando el puerto 3000. Bueno, digamos que tengo un conflicto y no quiero que sea 3000. Puedo venir aquí y hacer clic derecho. Cambiar el puerto de dirección local. Y en su lugar, puedo cambiarlo a, hagámoslo 55 55, así. Y si vuelvo a mi aplicación de React en el puerto 3000, no hay nada. Pero si lo cambio a 55 55, ahí lo tenemos. Así que es una excelente manera de hacer tu propio reenvío de puertos según tus necesidades. Detecta los que necesitas de forma predeterminada, pero también puedes cambiarlos siempre que quieras.

Entonces vimos cómo abrir una aplicación con un contenedor de desarrollo, pero ¿cómo creas y configuras tu propio contenedor de desarrollo para que otras personas lo usen? Vamos a echarle un vistazo nosotros mismos. Así que vamos a venir aquí y ¿cómo sales? Primero, voy a elegir contenedores remotos, cerrar la conexión. Se cerrará para mí. Ahora estoy de vuelta en VS Code y quiero abrir un proyecto.

Este proyecto ya está local. Se llama Shop At Home. Ahora este es solo un proyecto normal, no tengo ningún contenedor de desarrollo y utiliza Svelte como la aplicación principal. Tiene Azure Functions en el backend y quiero usar Azure Static Web Apps como una dependencia que los conecta y los hace funcionar. Así que tengo muchas cosas en esta aplicación y quiero que las personas puedan usarla tal cual.

Lo primero que notarás es que tengo Peacock ejecutándose de nuevo, todo está en rosa para mi local, y lo que quiero hacer es agregar ese contenedor de desarrollo. Así que voy a elegir agregar contenedor de desarrollo. Ahora podría elegir node, pero en realidad quiero encontrar algo con funciones. Escribí 'funk' y no hay nada. Así que voy a hacer mostrar todas las definiciones. Y mira, hay Azure Functions y node.js. Así que voy a elegir eso. Ahora puedes ver aquí que ya tengo mi contenedor de desarrollo abierto, que va a instalar funciones y node y prácticamente llevarme a donde quiero estar. Ahora tiene algunas extensiones de forma predeterminada, pero también quiero agregar algunas más. ¿Qué debo hacer? Bueno, puedo agregar algunas extensiones más ahora mismo yendo a las extensiones. Ahora sé que quiero que Svelte tenga su extensión para mí. Así que puedo hacer clic derecho en ella y elegir agregar al contenedor de desarrollo. Todas estas se están agregando a ese contenedor de desarrollo, Jason. Así que está preconfigurando las dependencias para mí. Otra cosa que quiero es este comando posterior a la creación. Ahora resulta que estoy en un monorepo, lo que significa que 'npm install' no funcionará en la raíz. Necesito ingresar a la carpeta de Svelte primero. Así que quiero ir a 'cds' en la aplicación de Svelte y luego ejecutar 'npm install'. Esto me preparará para tener el mayor éxito. Entonces lo siguiente que quiero hacer es abrir mi contenedor o decir remoto. Y vamos a decir abrir y reconstruir.

Ahora estoy haciendo abrir y reconstruir porque quería abrir el contenedor, lo cual puedes notar que hizo. Y ahora también está construyendo la imagen de Docker. Está tomando todo lo que se configuró en esa imagen para funciones y para node. Y también está configurando las extensiones que estaban en esa lista preconfigurada, incluyendo las que agregué. Y va a ejecutar ese npm install en la carpeta correcta. Así que cuando terminemos, deberíamos ver que la aplicación Svelte tenga una carpeta modules de node, que acaba de ejecutar aquí abajo, pero ¿funciona esto? Esa es una buena pregunta.

Así que puedo ir a la carpeta API. Ahí es donde están mis funciones y puedo ejecutar func start, probarlo de una manera diferente. Así que está ejecutando mis Azure Function Core Tools. Las cosas están funcionando aquí. Y luego lo segundo que quiero hacer es abrir otra terminal. Presiono comando barra. Haré que eso desaparezca. Y luego aquí, quiero volver. Quiero ir a la carpeta Svelte. Y resulta que tengo un comando npm llamado run local. Así que lo reviso. Lo que hace local es usar npx para usar el CLI de Static Web App para iniciar la carpeta pública y luego acceder a la API en sí. Ahora, antes de ejecutar local, quiero ejecutar un comando llamado build. Eso va a construir mi aplicación Svelte y colocar los activos públicos en la carpeta /public. Y luego voy a ejecutar npm run local. Una vez que haya terminado, noto que apunta a 7071 para la API. Así que configurará automáticamente los cores para mí. Hay muchas dependencias aquí. Esto es como desarrollo del mundo real. Así que el contenedor se encarga de todo esto por nosotros. Una vez que todo esto esté en funcionamiento, lo bueno de esto es que solo tienes que navegar hasta él, lo cual puedo ver aquí mismo. Ahí está mi aplicación Svelte. Y podemos ver que tengo mi lista de fresas, manzanas y pan rebanado. Y puedo hacer todo lo demás que podría hacer en los otros contenedores también con la depuración y el paso a paso.

Es realmente muy bueno. Acabamos de ver tres demos diferentes sobre el uso de contenedores de desarrollo para diferentes escenarios. Lo genial aquí es que, ya seas un estudiante que está aprendiendo nuevas tecnologías, y no tienes tiempo para configurar las cosas, puedes usar un contenedor de desarrollo para hacer esto. Si no tienes suficientes dependencias en tu máquina, o tal vez estás trabajando en una versión diferente de Python, Node o Rust, puedes usar un contenedor de desarrollo. Y si estás haciendo desarrollo en equipo o tal vez en código abierto, donde quieres que otras personas usen tu aplicación sin largas instrucciones de configuración y scripts, puedes configurar un contenedor de desarrollo para que puedan clonar directamente desde GitHub y trabajar con la misma configuración exacta que tú. Es bastante genial hacerlo. Y observa que usamos Peacock para colorear la situación local versus remota para que sea más fácil saber si estás dentro o no. Y eso son los contenedores. Así que hoy hemos cubierto bastante. Puedes ver que VS Code realmente puede hacer eso y asegurarte de que sabes qué botón presionar, que es la paleta de comandos F1 o Comando Shift P. Soy John Papa y puedes obtener más información sobre VS Code en la documentación desde este enlace aquí. Gracias.