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.

Image for post

Utilizaré el framework angular como ejemplo.

Image for post

Primero creo la carpeta del proyecto

Image for post

Podemos ver que aun no hay archivos generados

Image for post

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
Image for post

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.

Image for post

Cuando termine tendremos algo como esto

Image for post

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

/ # cd app/ 
/app # ng serve
Image for post

Y si verificamos en nuestro navegador

Image for post

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

Image for post

Haremos un cambio sencillo:

Image for post

lo modificamos por

Image for post

Y nos queda

Image for post

Espero que esta publicación haya sido de su agrado

Share:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *