10. Variables de entorno, imágenes en la nube y eventos de padres a hijos
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 aVote
(ver código) - En
Vote
lanzamos el callback derefreshItem
al padre (ver código).