Local vs producción: 7 razones por las que tu app falla

Una de las grandes fallas en el mundo de desarrollo es enfrentar el local vs producción: muchos errores para poder mostrar nuestro proyecto correctamente. Aunque podemos reducir esta cantidad de errores con la experiencia, la verdad es que a medida que cada dependencia, alojamiento, proveedor de dominios, se actualiza, todo puede cambiar y por ende debemos estar a la vanguardia para poder solucionar estos problemas rápidamente.

En este post te contaré un poco sobre algunos de los problemas que he tenido en el transcurso de mi carrera, tal vez los más comunes para poder solucionar el local vs producción, así que comencemos.

Lo que vas a necesitar

Aquí te dejo algunos enlaces necesarios para este post:

1. Video del proceso. Aquí podrás ver el complemento del post.
2. Repositorio. Clona y descarga lo que hicimos en este post.
3. Post variables de entorno. Aquí podrás ver más a fondo sobre las variables de entorno.
4. Curso aws full stack. Aquí puedes ver el curso completo de aws.

1 Variables de entorno

En este primer error nos vamos a encontrar con la creación de variables de entorno dentro de nuestro archivo local. Siempre que creamos variables de entorno lo hacemos dentro de nuestro archivo .env, pero cuando pasamos a producción hay factores que interrumplen esto como el archivo .gitignore, que justamente se encarga de no permitir subir este archivo al repositorio.

Claramente esto es lo recomendado, dado que no podemos subir nuestras claves dentro de las variables a un repositorio que puede ser compartido. Estas claves son de vital importancia entonces solamente deben existir ya sea localmente, o bien en el alojamiento que escojamos.

Para este caso voy a utilizar Heroku, el cual nos permite subir la aplicación de una manera sencilla, y específicamente hablando de las variables de entorno lo que tenemos que hacer es ir a settings > config vars.

simplemente agregamos las variables junto con los valores sin puntos ni comas. De esta manera Gero que habrá que variables se usarán dentro del código y una vez puestas el automáticamente reiniciará los dynos existentes para que el desarrollo puede iniciar nuevamente con las variables correctas. Aunque si lo deseas también puedes reiniciarlo manualmente.

2 Dependencias

Este error es por mucho uno de los más comunes que hay cuando nos encontramos en local vs producción. Resulta que nuestro desarrollo necesita ciertos paquetes o dependencias para funcionar pero porque este error es tan importante:

1. Tienes dependencias instaladas en tu computador y no en el proyecto como tal. Tal vez desarrolla varios proyectos y al instalar homebrew otros gestores de dependencias, estos los pueden instalar directamente en tu computador y claramente va a funcionar tu proyecto. Pero cuando nos pasamos a producción, gero Q o cualquier otro hosting no va a encontrar estas dependencias.
2. Los nombres que tienes en el archivo de dependencias, como en node js, llamado package.json, están incorrectamente declarados.
3. Tener alguna dependencia declarada en gitignore
4. Subir paquetes al repositorio pero no actualizar estos en el hosting a medida de que se actualizan.

Entonces, ¿cuál es la solución a este error?, lo principal es revisar los logs del alojamiento, este nos dirá claramente cuál es el problema con las dependencias, pero principalmente el error que te va a salir es: MODULE NOT FOUND. Y este justamente ocurre cuando no encuentra una dependencia que si estaba en local pero no está ahora en el alojamiento.

Solución en NODE JS:

• Eliminar carpeta contenedora de los paquetes: node_modules y package-lock.json
• agregar el paquete al archivo package.json.
• luego ejecutar:

sudo npm i

De esta manera eliminamos la carpeta que contenía o no contenía la dependencia errada, agregamos la dependencia al archivo e instalamos todos los paquetes que tenga este, de esta manera corregimos este y cualquier otro error de dependencias en local vs producción.

3 Versiones diferentes

Este error comprende la incompatiblidad que tienen las dependencias con las versiones mínimas que exige el alojamiento. Cuándo utilizamos por ejemplon Node js dentro de nuestra versión local tal vez no nos exija una versión mínima para trabajar, y asimismo esta versión va a ser compatible con las diferentes dependencias que tenemos en el proyecto.

sin embargo cuando pasamos a producción, en muchas ocasiones los alojamientos como Heroku nos van a exigir tal vez versiones mínimas de trabajo. Al aumentar la versión por ejemplo de Node js, inmediatamente va a causar conflictos con las dependencias que tenemos y asimismo puede causar conflictos con el desarrollo total.

Es por esto que es recomendable que al momento en que veamos el error unexpected token ‘||=’ entendamos que se refiere a un error de versiones. Pero entonces cuál es la solución:

1. Siempre trabajar con versiones superiores desde nuestro PC, no esperar a llegar al alojamiento para modificarlas.
2. inmediatamente aparezca el error tenemos que comenzar a actualizar dependencia por dependencia y verificar que nunca usee conflictos en ninguna de las modificaciones que tenemos.

4 Rutas

Este cuarto error consta de las rutas con las cuales configuramos los archivos de nuestro programa. Cuando creamos nuestro repositorio y lo trabajamos desde nuestro computador, muchas de las rutas que nosotros tenemos para los archivos imágenes tal vez videos música entre otros, los tenemos localmente en su mayoría. Es muy probable que los archivos que nosotros tenemos o bien no los almacenamos dentro del folder del proyecto o bien estén por fuera del mismo.

¿Cómo solucionamos este problema engrosamiento para que en producción no nos suene el error? que tenemos que hacer es usar, por ejemplo en Node js:

path.resolve + __dirname

Esos comandos nos van a permitir indicarle al servidor que vamos a subir a producción que busque los archivos dentro de la ruta principal del proyecto y no por fuera. Van a resolver la ruta relativa del desarrollo, utilizando también el nombre del directorio y de esta manera va a comenzar a buscar los archivos única y exclusivamente dentro del folder o carpeta del proyecto

Si añadiendo esto nos presenta un error adicional donde no encuentro los archivos entonces tenemos que ingresarlos al folder del proyecto o bien adjuntar las URLs de los diferentes archivos videos imágenes entre otros, pero que estén alojadas en otros servidor.

5 Proxy

Este error sucede cuando trabajamos con complementos que geneneran conflicto de puertos entre si, por ejemplo react y express. Por un lado react es una biblioteca de JavaScript para crear una interfaz frontend, y por otro lado Express está enfocado en el backend como framework. Ambos utilizan puertos diferentes y ambos en algunos casos son necesarios para un proyecto, entonces cuál es la solución: usar un proxy.

El proxy nos permite indicar en producción y también el local que puerto se va a utilizar para que la solicitudes que haga al servidor React lleguen correctamente y a su vez sean de vueltas. Lo que tenemos que hacer en dado caso es asignarle un Proxy dentro del archivo package.json de react, indicando que puerto será el usado:

"proxy": "http://localhost:3001"

y de esta manera vamos a poder trabajar de la madera correcta tanto en local como en producción.

6 Errores sin manejar

Este error es sencillo y más allá de que tenga que ver sobre local vs producción es controlar todos los posibles errores que pueden causar las solicitudes del servidor con un catch. Aunque parezca un error sencillo la verdad es que cuando la aplicación se rompe en local solamente basta con volverla a reiniciar pero cuando estamos en producción, en el caso de heroku, los Dynos vuelve a reiniciar la aplicación después de un tiempo y si esto no se ha solucionado va a quedarse en un bucle de errores.

Es tan sencillo como agregar un catch a todas las solicitudes al servidor. Y claramente también agregarlas en el frontend dónde fueron llamadas.

7 Dominios autorizados

Cuando utilizamos servicios externos o APIs, estas a su vez requieren ciertos permisos de nuestro desarrollo. No toda solicitan los menos permisos algunas son más permisivas que otras. Sin embargo en la mayoría de ocasiones nos van a solicitar demostrar que nuestro dominio es nuestro no solamente con registros DNS, sino también de otros metodos.

En el caso de Google cloude, para utilizar Google Maps en nuestro desarrollo nos van a solicitar el dominio en el cual se va a mostrar (claramente en este paso ya tenemos que tener una tarjeta de crédito agregada como método de pago, por lo menos para ese servicio), y este dominio si todo está en orden nos va a permitir mostrar Google Maps.

Video de ayuda

Hice este video para guiarte en el proceso, haz click para verlo y si te gusta no olvides dar like y suscribirte para nuevos videos.

Producto sugerido

Uno de los mejores teclados del mercado, con firmware QMK, permitiendo que sea prácticamente 100% personalizable, desde teclas, luces, acciones por teclas, teclas duales, entre otros.

Conclusión

Estos errores aunque algunos son comunes, otros representan qué tu desarrollo tiene faltas a profundidad. No es del todo malo en contra de esos errores sino todo lo contrario nos va a ser mejorar nuestro desarrollo y técnica de programación para nuestros proyectos a futuro.