De una forma simple.

Introducción

En este artículo exploraremos como poder desarrollar un proyecto LWC OSS con Docker utilizando una imagen de node (explícitamente una de alpine) tratando de ser lo más simple y conciso con este proceso. Es necesario tener instalado docker en nuestro equipo y también conocimiento por lo menos básico de Docker para poder entender este mini tutorial.

Si es la primera vez que escucha de LWC OSS, este es el framework javascript actual y recomendado que se utiliza para desarrollar interfaces personalizadas dentro de Salesforce. Esta publicado por el propio Salesforce bajo una licencia de uso libre que se permite utilizar en proyectos fuera de Salesforce, con el cual podemos desarrollar aplicaciones incluso de uso comercial; para mas información vistia el siguiente enlace https://lwc.dev/

Desarrollar de esta forma permite tener un comportamiento homogéneo tanto en desarrollo como al momento de distribuir nuestra aplicación.

Seleccionando una Imagen

En Docker Hub podemos acceder a las imágenes oficiales de node en el siguiente enlace https://hub.docker.com/_/node. Una vez allí busquemos una que cumpla nuestras necesidades.

Para este artículo vamos a utilizar 24-alpine, en la que se utiliza la versión 24 de node con el sistema operativo Alpine. Si se preguntan por que Alpine, la respuesta es que esta imagen suele ser reducida en tamaño y por lo tanto muy beneficiosa para su futura distribución.

ya que tenemos nuestra tag identificada, bajamos la respectiva imagen de docker a nuestro equipo con el siguiente comando

docker pull node:24-alpine

Al finalizar de ejecutar tendremos disponible nuestra imagen de Node lista para utilizar.

Cabe mencionar que el pull es opcional, podemos simplemente ejecutar el comando y en caso de que la imagen no se encuentre localmente, Docker buscará en Docker Hub y la descargará.

Creando la Carpeta del Proyecto

En cualquier lugar de nuestra preferencia de nuestro equipo local creemos una carpeta vacía para nuestro proyecto, el cual va a contener todo el código fuente, en este pequeño tutorial simplemente vamos a crear una carpeta llamada app.

Creando el Contenedor

Nuestro paso siguiente es crear un contenedor que deberá cumplir los siguientes objetivos:

1. Permitir ejecutar comandos de Node
2. Exponer un puerto para que nuestra app sea alcanzable.
3. Enlazar nuestra carpeta del proyecto con una carpeta dentro del contenedor.
4. Asegurar que los archivos creados queden bajo nuestro nombre para evitar problemas de permisos.
5. Permitir que sea eliminado una vez terminemos nuestro trabajo.

Para lograrlo podemos ejecutar el siguiente comando

docker run -p 127.0.0.1:3000:3000 --rm -it --mount type=bind,src=./app,target=/app --user $(id -u):$(id -g) node:24-alpine ash

Explicación del comando

• –p 127.0.0.1:3000:3000 expone el puerto por defecto de la aplicación en el contenedor con una dirección local de nuestro computador, en este caso 127.0.0.1:3000.
• –-rm indica que tras la finalización de la ejecución del contenedor, este sera automaticamente eliminado.
• -it permite al contenedor correr de forma interactiva y con una pseudo terminal para ejecutar comandos dentro del contenedor.
• –mount type=bind,src=./app,target=/app permite enlazar nuestra carpeta que va a tener el codigo del proyecto haciendo una referencia relativa de la ubicación con una carpeta dentro del contenedor con una direccón absoluta.
• –user $(id -u):$(id -g) indicamos a docker que el contenedor deberia de correr con nuestro usuario, de esta forma los archivos que se creen o se modifican quedan bajo nuestro nombre. En caso de excluirse esta opción, Docker utiliza el usuario root y los archivos creados y enlazados no se podran manipular de forma directa en nuestro equipo local.
• node:24-alpine es el nombre de la imagen que se utilizará como base para crear el contenedor.
• ash es uno de los intepretes de comandos de Alpine, y es el que nos va a permitir ejecutar todos nuestro comandos de consola. Alpine no utiliza bash.

Una vez ejecutamos este comando, estaremos dentro de nuestro contenedor con la posibilidad de ejecutar comandos.

Configurando y Desarrollando el Proyecto

Una vez dentro de nuestro contenedor podemos verificar que la carpeta app se encuentra en la raiz de nuestro contenedor

/ $ ls
app    dev    home   media  opt    root   sbin   sys    usr
bin    etc    lib    mnt    proc   run    srv    tmp    var

lo siguiente es inicializar nuestro proyecto con la ayuda de la herramienta LWR de Salesforce con el siguiente comando

/ $ npm init lwr@latest

La cual nos va a realizar un par de preguntas, a la primera que es el nombre de la carpeta del proyecto le vamos indicar que se va a llamar “app”, tal cual es el nombre de la carpeta dentro del contenedor y al finalizar tendremos dentro app los archivos necesarios iniciales de configuración como package.json y lwr.config.json.

Need to install the following packages:
create-lwr@0.18.2
Ok to proceed? (y) y


> npx
> create-lwr

create-lwr v0.18.2
✔ Project directory name: … app
✔ Select the type of project: › Single Page App
✔ Select a project template: › LWC

Scaffolding project in /app...

Done. Now run:

  cd app
  npm install
  npm run dev

si todo salió bien, en nuestra carpeta de app de nuestro equipo local fuera del contenedor estos mismos archivos deberian de verse reflejados y ser nosotros los propietarios de cada archivo creado.

/app $ ls
README.md        lwr.config.json  package.json     src

El siguiente paso para finalizar nuestra configuración es correr el siguiente comando tal cual nos explican en la documentación oficial de LWC OSS https://lwc.dev/ el cual seria:

/app $ npm install

Con esto se deberían de instalar todas las dependencias necesarias para que nuestro proyecto pueda ejecutar correctamente. Si revisamos detalladamente nuestra carpeta del proyecto ahora podremos ver una nueva carpeta llamada node_modules.

Ya con el proyecto configurado y con todas las dependencias listas, solo queda ejecutar el proyecto con el siguiente comando

/app $ npm run dev

cuyo resultado debería ser similar a:

> app@0.0.1 dev
> lwr dev

Application is available at: http://localhost:3000

si vamos al navegador y abrimos la ruta 127.0.0.1:3000 deberíamos ver lo siguiente

Felicidades, ya tenemos todo listo para desarrollar, basta con realizar cambios en nuestra archivos ubicados en nuestro equipo local y deberíamos de ver automáticamente estos cambios reflejados en nuestra app.

Ahora una vez finalizado nuestro trabajo podemos detener la ejecución de nuestra app con la combinación de teclas “ctrl + c” y finalmente con el comando exit.

/app $ exit

Al terminarse la sesión de la terminal, el contenedor será automáticamente eliminado y para la próxima vez que deseemos continuar con el desarrollar bastará con ejecutar de nuevo nuestro comando de Docker que utilizamos al principio y una vez dentro del contenedor ir a nuestra carpeta de la app y volver a ejecutar “npm run dev”.

Proximos Pasos

Actualizar Node

Node siempre recibe actualizaciones periódicas en el cual se incluyen nuevas funcionalidades y se eliminan vulnerabilidades, en general no debería de haber problema con cambiar nuestra imagen de node a una mas reciente en nuestro contenedor temporal, pero para evitar problemas siempre es bueno utilizar un contenedor de desarrollo y ejecutar todas nuestra pruebas de unidad. Si no sabe como realizar pruebas en un proyecto LWC OSS, el siguiente artículo lo guiará en como Configurar JEST para LWC OSS

Distribuir nuestra App

Una vez listos para salir a un ambiente productivo lo recomendable es crear una imagen de docker que empaquete nuestro código.

Conclusiones

• Utilizar docker de esta manera nos permite ejecutar un proyecto con una versión especifica de node sin tenerla instalada en nuestro computadora directamente.
• Al trabajar de esta forma nos asegura que cuando creamos la imagen de docker para distribución va a funcionar correctamente.
• Actualizar node durante nuestro desarrollo es tan simple como seleccionar una nueva etiqueta del repositorio oficial de Node en Docker Hub.
• Se puede generalizar esta forma de desarrollar en docker con otras tecnológicas, en esencia basta con definir la carpeta del proyecto y encontrar la imagen que corresponda en la que deseemos desarrollar.

Muchas gracias por leer. Si les pareció útil, recuerden que compartir es gratis.