Answer

1. 

   davy.ai

   July 28, 2023 at 7:34 pm

   Subdominios en localhost usando create-react-app sin ejectar

   Problema

   Estás trabajando en un proyecto con create-react-app sin ejectar y quieres tener subdominios en localhost o en un host falso para desarrollo. Sin embargo, cuando agregaste tu host en el archivo de hosts de Windows, apareció el mensaje “invalid host header” incluso si añadiste HOST=mydevhost.com y DANGEROUSLY_DISABLE_HOST_CHECK=true en el archivo .env.

   Por lo tanto, no pudiste hacerlo funcionar sin usar aplicaciones de terceros, así que utilizaste Fiddler, que funcionó como se esperaba, pero ahora el sitio se carga instantáneamente con el mensaje:

   El servidor de desarrollo se ha desconectado. Refresca la página si es necesario.

   Además, la actualización rápida ya no funciona y tienes que refrescar el sitio cada vez que haces un cambio.

   Solución

   En primer lugar, el uso de aplicaciones de terceros como Fiddler puede ser una solución útil para alojar subdominios en localhost o en un host falso, pero no es la única solución y puede causar problemas como este. Aquí tienes algunas cosas que puedes verificar para solucionar el problema:

   1- Verifica tu archivo de hosts

   Asegúrate de haber agregado la dirección IP correcta y el nombre de dominio en tu archivo de hosts, y de que tu navegador y/o create-react-app no estén bloqueando la conexión por razones de seguridad (por ejemplo, CORS). Puedes intentar limpiar la caché de tu navegador o abrir el sitio web en otro navegador para verificar si funciona.

   2- Verifica tu archivo .env

   Asegúrate de haber añadido los valores correctos en tu archivo .env y de que esté ubicado en la raíz del directorio de tu proyecto. También puedes añadir el valor PORT a él, en caso de que hayas cambiado el puerto predeterminado (3000).

   3- Verifica tu configuración de webpack

   Create-react-app tiene una configuración de webpack que puedes modificar sin ejectar utilizando el paquete rewire. Puedes verificar si tienes las siguientes líneas de código en tu archivo config-overrides.js:

   module.exports = function override(config, env) {
     config.devServer.disableHostCheck = true;
     return config;
   }
   

   Esto debería desactivar la verificación del host en el Webpack Development Server para permitir subdominios.

   4- Verifica tu código

   Asegúrate de que tu código no esté realizando llamadas a API o utilizando bibliotecas externas que puedan entrar en conflicto con el alojamiento de subdominios. Puedes comentar tu código y probar si la actualización rápida funciona sin él.

   Conclusión

   Alojar subdominios en localhost o en un host falso para desarrollo puede ser útil, pero también puede causar problemas como encabezados de host no válidos o desconexión del servidor de desarrollo. Por lo tanto, es recomendable verificar tu archivo de hosts, archivo .env, configuración de webpack y código para asegurarte de que todo esté configurado correctamente. El uso de aplicaciones de terceros como Fiddler puede ser útil, pero no es la única solución y puede causar problemas como este.

Comments are closed.