Usa docker para configurar tu entorno de desarrollo

En mi trabajo como desarrollador actualmente me desempeño como mobile developer, pero no quita que a veces tenga que realizar tareas en el back-end o el front-end.
Actualmente en la empresa en la que trabajo tenemos un amplio stack, por lo que debo de instalar cada uno de los frameworks necesarios. Sin embargo, no quiero instalar algo que solo usaré una o dos veces cada 5 o 6 meses (quien sabe); es aqui en donde Docker viene a salvar el dia.

Utilizaré el framework angular como ejemplo.

Primero creo la carpeta del proyecto

Podemos ver que aun no hay archivos generados

Ahora levantaremos un contenedor, el mismo tendrá instalado todo lo necesario para trabajar. Para ello ejecutamos el siguiente comando:

docker container run --name angular-test -it -p 4200:4200 --network=host -v /home/allenjagger/Projects/angular-test:/app node:current-alpine sh

En donde:

name: es el nombre del container

p: es para hacer port mapping, el primer puerto es de la computadora y el segundo es el del contenedor

network: conectamos el contenedor a la red del host

v: la primera parte es la ruta de la carpeta del proyecto que montaremos en el directorio /app del contenedor (puede ser cualquier directorio dentro del contenedor)

it: para resumirlo, mantemos la interactividad con el contenedor y es por eso que agregamos sh al final, para ejectuar un shell dentro del container

Usaremos node:current-alpine que se encuentra en el dockerhub

Ahora bien, ya tenemos el contenedor con node, pero no tenemos instalado angular. Entonces hacemos lo siguiente

npm install -g @angular/cli

Creamos una nueva aplicacion angular con

ng new my-app --directory /app

Es importante agregar la opción directory e indicarle que lo haga en /app, ya que ahí se encuentra montado nuestro directorio, y por consiguiente ahí está el código con el que trabajaremos.

Cuando termine tendremos algo como esto

Nos queda correr nuestra aplicación, por lo que volvemos al contenedor y hacemos

/ # cd app/ 
/app # ng serve

Y si verificamos en nuestro navegador

Ahora usando nuestro editor favorito podemos comenzar a desarrollar. Por ejemplo Visual Studio Code, y abrimos la carpeta del proyecto que creamos al principio

Haremos un cambio sencillo:

lo modificamos por

Y nos queda

Espero que esta publicación haya sido de su agrado