Ejecuta tu proyecto Angular en un smartphone o tablet 馃殌

Publicado el 23.07.2023 a las 23:15

Ejecuta tu proyecto Angular en un smartphone o tablet 馃殌

  1. Exponer nuestro servidor de desarrollo Angular en la red

  2. 驴C贸mo conocemos nuestra direcci贸n IP en Windows?

  3. Accediendo a nuestro servidor de desarrollo desde un dispositivo f铆sico

Logo de fjmduran

Ejecuta tu proyecto Angular en un smartphone o tablet 馃殌

Cuando estamos desarrollando nuestras aplicaciones web, necesitamos ver c贸mo se visualizar谩 en un dispositivo f铆sico distinto al equipo en el que estamos desarrollando, por ejemplo, un m贸vil o una tablet.


Para esta tarea, los navegadores traen incluidas en las herramientas de desarrollo la visualizaci贸n en distinto tama帽os de pantallas predeterminados, incluso podremos definir nuestra pantalla personalizada.


Por ejemplo, as铆 simularia las herramientas de desarrollo de Google Chrome un iPhone.

Visualizaci贸n de iPhone como las herramientas de desarrollo de Google Chrome

馃槓 Pero en ocasiones, el resultado en el dispositivo f铆sico no coincidir谩 con la simulaci贸n facilitada por las herramientas de desarrollo del navegador y lamentablemente no nos percatamos hasta que no desplegamos nuestra aplicaci贸n.


Es cierto que esto no sucede en la mayor铆a de las ocasiones y las herramientas de desarrollo lo hacen bien, pero sucede y es bastante molesto.


Lo que yo hago, es probar durante todo el proyecto con las herramientas de desarrollo del navegador, y antes de desplegar pruebo con dispositivos f铆sicos.


Para hacerlo lo que hago es:

  1. Exponer mi servidor de desarrollo en una red.
  2. Deshabilitar el firewall de Windows temporalmente para permitir el acceso a mi equipo desde otros dispositivos de la red.
  3. Obtenci贸n de tu IP si no la conoces; por ejemplo, la IP de tu dispositivo es asignada autom谩ticamente por un DHCP.
  4. Acceso desde un dispositivo f铆sico al servidor de desarrollo.

Exponer nuestro servidor de desarrollo Angular en la red

Para exponer nuestro servidor de desarrollo, Angular nos facilita un par谩metro en el comando ng server 馃憞

ng serve --host 0.0.0.0
Exponiendo servidor de desarrollo Angular

Ya podr铆amos acceder a nuestro servidor de desarrollo con cualquier dispositivo que estuviera conectado en nuestra misma red.


Insisto, tiene que estar en la misma red, es importante 馃毄


Si quieres profundizar en el tema de las redes de dejo un art铆culo 馃

Imagen del art铆culo

Redes IPv4

Te ayudo a comprender los conceptos b谩sicos de las redes IP v4

驴C贸mo conocemos nuestra direcci贸n IP en Windows?

En el caso de que no conozcas tu direcci贸n IP local, no me refiero a tu direcci贸n IP p煤blica, lo puedes saber en el caso de Windows abriendo una consola de comando y escribiendo:

ipconfig
Conociendo mi IP local

Accediendo a nuestro servidor de desarrollo desde un dispositivo f铆sico

馃毄 Antes de intentar acceder a tu servidor de desarrollo desde otro dispositivo es importante que tengas deshabilitado el Firewall de Windows o al menos que a帽adas una regla para permitir el acceso.


Si no haces eso el dispositivo f铆sico con el que intentes acceder no llegar谩 a comunicar con tu servidor de desarrollo.


A continuaci贸n, con tu dispositivo f铆sico lo que haces es escribir en el navegador la IP local de tu servidor de desarrollo especificando el puerto.

En mi caso uso el puerto por defecto de Angular, el 4200

192.168.1.165:4200

Y aqu铆 tienes el resultado 馃拑

Acceso a servidor de desarrollo de Angular desde smartphone

Hasta luego 馃枛