<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Carlos Sanchez</title>
    <description>The latest articles on DEV Community by Carlos Sanchez (@carlosdevsanchez07).</description>
    <link>https://dev.to/carlosdevsanchez07</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1294874%2F04f4b8ac-32fb-44a5-98dc-217dad3109fd.jpeg</url>
      <title>DEV Community: Carlos Sanchez</title>
      <link>https://dev.to/carlosdevsanchez07</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/carlosdevsanchez07"/>
    <language>en</language>
    <item>
      <title>WPPCONNECT Server, Docker Deploy</title>
      <dc:creator>Carlos Sanchez</dc:creator>
      <pubDate>Sat, 09 Mar 2024 03:04:58 +0000</pubDate>
      <link>https://dev.to/carlosdevsanchez07/wppconnect-server-docker-deploy-5gcm</link>
      <guid>https://dev.to/carlosdevsanchez07/wppconnect-server-docker-deploy-5gcm</guid>
      <description>&lt;p&gt;Hola developers, hoy les comparto mi experiencia y frustración en la implementación de la librería wwpconnect a través de su API REST &lt;a href="https://wppconnect.io/wppconnect/"&gt;&lt;/a&gt; y todo el desafío a la hora de desplegar en producción.&lt;br&gt;
¿Quién no se ha enfrentado con el típico problema donde vamos iniciando en la empresa o en el producto y queremos ahorrar recursos?&lt;/p&gt;

&lt;p&gt;Todo un reto encontrarme con el requerimiento de querer usar una librería no oficial de WhatasApp web y no tener experiencia en ello.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx6k7dnms0hyb19dx8c5e.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx6k7dnms0hyb19dx8c5e.jpeg" alt="Image description" width="672" height="788"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hoy les comparto mis primeros pasos para iniciar con el despliegue a producción de la librería.&lt;br&gt;
Iniciamos descargando el repositorio desde GitHub &lt;a href="https://github.com/wppconnect-team/wppconnect"&gt;&lt;/a&gt;, nos encontraremos con un proyecto completo, con poca necesidad de cambios para realizar un despliegue completo y funcional.&lt;/p&gt;

&lt;p&gt;Una vez clonado, iniciamos la configuración de Docker.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Creamos un fichero Dockerfile donde vamos a especificar el directorio y los comandos para prepararlo a producción.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM node:lts-alpine3.18 as base
WORKDIR /app
ENV NODE_ENV=production PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
COPY package.json ./
RUN yarn install --production --pure-lockfile &amp;amp;&amp;amp; \
    yarn cache clean
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Especificamos que base de node usaremos, además especificamos el directorio donde enviaremos todos los archivos necesarios para la ejecución, exportaremos una variable de puppeteer skip chromium donde le decimos que no genere cada vez que compile, una descarga nueva de chromiun, por último copias el package al directorio raíz y corremos la instalación de dependencias.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Pasamos a la generación de los archivos build para ejecutar nuestro proyecto compilado.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM base as build
WORKDIR /app
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
COPY package.json  ./
RUN yarn install --production=false --pure-lockfile &amp;amp;&amp;amp; \
    yarn cache clean
COPY . .
RUN yarn build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Agregamos chromiun y la ejecución de nuestro proyecto.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM base
WORKDIR /app/
RUN apk add --no-cache chromium
RUN yarn cache clean
COPY . .
COPY --from=build /app/ /app/
EXPOSE 21465
ENTRYPOINT ["node", "dist/server.js"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Creamos nuestro archivo compose de docker y para poder correr nuestra API en el demonio de docker.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;version: '3.9'
services:
  wppconnect:
    build:
      context: .
    volumes:
      - ./config.ts:/app/config.ts
      - ./wppconnect_tokens:/app/tokens
    ports:
      - '21465:21465'
  mongo:
    image: mongo:latest
    restart: always
    container_name: mongo
    environment:
      MONGO_INITDB_ROOT_USERNAME: test-app
      MONGO_INITDB_ROOT_PASSWORD: 12345678a
    ports:
      - '27017:27017'
volumes:
  mongodb_data_container:
  wppconnect_tokens: {}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Por último corremos en nuestro cloud el comando de docker-compose up -d y disfrutamos nuestro servicio de WhatsApp Web.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Conclusión: &lt;br&gt;
WppConnect API un proyecto donde nos encontramos con una solución no tan directa con WhatsApp Web, pero con gran facilidad de implementar para poder cumplir con un requerimiento y de fácil uso.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6c2hdri4wfcut8omcy1m.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6c2hdri4wfcut8omcy1m.jpeg" alt="Image description" width="275" height="183"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Carlos Sanchez, developer Full-Stack JavaScript/TypeScript&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
