10. Variables de entorno, imágenes en la nube y eventos de padres a hijos

13/04/20191 Min lectura — En React, Client, Deploy, 😀

Tras el fiasco del local storage me centro en resolver problemas que ya he visto en días anteriores.

Variables de entorno en fichero .env

Las rutas de llamadas a la API de philosophers están haciendo escribiendo "a fuego" esa ruta en el código.

Lo mismo está ocurriendo con las rutas de las imágenes.

Esto es algo que tiene que ser un parámetro configurable a nivel de entorno y para eso React ofrece soporte como se explica en este artículo.

Creas las variables y luego las puedes usar como process.env.NOMBRE_VARIABLE.

Defcon 1. El nombre de las variables debe empezar como REACT_APP_ porque, de no ser así, no será reconocida en tiempo de ejecución.

Defcon 2. Ni se te ocurra subir el fichero de configuración al repositorio. Crea una copia como .env.example para saber qué parámetros hay que usar, pero evita pasar información comprometida al servidor.

Imágenes en la nube

Subimos las imágenes de los filósofos a un bucket de AWS S3 ya que tenemos acceso gratuito con una cuenta nueva.

Para tener capacidad de redimensionamiento de las imágenes y no perder tiempo ahora con esos procesos, nos aprovechamos del uso gratuito de cloudimage.

Captura de tu bucket las imágenes con una ruta que, además, las redimensiona. Es un CDN con operaciones sobre imágenes, muy interesante descubrimiento.

Eventos de padres a hijos

Quiero algo también bastante básico. Después de cada voto a cada cita, que se refresque la pantalla y aparezca una nueva.

Para eso debemos crear un método a nivel de App que lance el refresco y pasárselo como props a los componentes hijos. Una vez se lance el voto el hijo se comunicará con el padre para informarle del suceso y entonces refrescará.

  • Cambiamos todo el código que recupera cada item de la API a un método refreshItem (ver código)
  • Pasamos ese método como props al componente hijo (ver código)
  • Desde el Author se lo pasamos a Vote (ver código)
  • En Vote lanzamos el callback de refreshItem al padre (ver código).