Ngrok

Has necesitado desplegar tu aplicación, pero no la has terminado o quieres probar como funcionaría en un entorno real. Hoy te presento el tunel http Ngrok.

¿Qué es un tunel http?

Un tunel http es una herramienta que nos permite acceder a nuestra aplicación desde cualquier dispositivo, sin necesidad de realizar un despliegue en un servidor. Esto es útil cuando consumimos un servicio como un webhook, que necesita de una url real para poder enviar peticiones.

¿Cómo funciona Ngrok?

Para empezar a utilizar ngrok primero debemos crearnos una cuenta en este enlace de registro. Una vez creada la cuenta, nos dirigimos a la sección de Authtoken y copiamos el token que nos proporciona. Luego podemos ir a la sección de descarga y descargar el archivo correspondiente a nuestro sistema operativo.

En este post vamos a ver como utilizar la descarga medianaete el zip, si lo descargas de otra forma, asegúrate de que ngrok se encuentre en el path de tu sistema operativo.

Una vez descargado, descomprimimos el archivo y nos dirigimos a la carpeta que se ha creado. Dentro de esta carpeta encontraremos un archivo llamado ngrok o ngrok.exe, dependiendo de tu sistema operativo. Para acceder a el archivo, abrimos una terminal y navegamos hasta donde se encuentre el archivo y ejecutamos el siguiente comando:

    
./ngrok config add-authtoken <token> // tu token de autenticación
  

o si preferiste agregarlo al Path de tu sistema operativo:

    
ngrok config add-authtoken <token> // tu token de autenticación
  

Luego de agregar nuestro token de autenticación, podemos empezar a utilizar ngrok. Para ello debemos tener una aplicación corriendo en nuestro equipo, en este caso utilizaré una aplicación de react con vite. Para iniciar la aplicación ejecutamos el siguiente comando:

    
npm create vite@latest
  

Una vez levantada la aplicación de react, vamos a servirla con ngrok. Para ello ejecutamos el siguiente comando en la ubicación donde se encuentra el archivo ngrok:

    
./ngrok http 5173 // 5173 es el puerto donde se encuentra corriendo nuestra aplicación
  

Luego de esto nos aparecerá una pantalla como la siguiente:

Si copiamos el link de ngrok.io y lo pegamos en un navegador podremos ver nuestra aplicación funcionando, y adivina que, si tu amigo de la esquina quiere ver tu aplicación, solo tiene que copiar el link y pegarlo en su navegador 😁.

Genial! 🤩 Ahora como un último tip si te diste cuenta la región de mi ngrok es us, si eres de latinoamérica, probablemente verás que la región es diferente. Te recomiendo que utilices la región de us ya que es la que en lo personal me ha dado menos problemas.

Si quieres cambiar la región de tu ngrok, puedes hacerlo con el siguiente comando:

    
./ngrok config edit
  

Luego de esto se nos abrirá un archivo el archivo de configuración de ngrok, en el cual podemos cambiar la región agregando debajo de “authtoken” lo siguiente => region: us.

Una vez hecho esto, debemos reiniciar ngrok para que los cambios surtan efecto y si volvemos a levantar ngrok, veremos que la región es la que nosotros configuramos, en este caso us.

Espero que este recurso te haya gustado y te ayude en tus futuros proyectos 🧑‍💻