Error al Actualizar la página (F5 o navegar directamente hasta ella) en remoto

[uo269450]

El error ocurre cuando, con la aplicación desplegada en remoto, navegamos por ejemplo a https://radarines1bwebapp.herokuapp.com/me directamente.

En cambio, entrando en https://radarines1bwebapp.herokuapp.com/ no da problemas, nos dirige a la vista correspondiente y se puede utilizar la aplicación.

Haciendo uso de la barra de abajo, podemos llegar, con el elemento que esta a la derecha del todo, hasta la primera url. Pero de nuevo, al hacer F5 nos da el error: "Cannot GET /me" .

Este problema solo ocurre en remoto, con la aplicación desplegada en heroku; desplegada en local no nos ha dado ese problema.

[labra]

Hemos estado hablando los profesores del curso sobre esta pregunta y el papel de la FAQ.

Un problema que tiene esta pregunta tal y como está planteada es que es una pregunta específica sobre una de las prácticas concretas de un grupo.

La idea de la FAQ es que las preguntas que se realicen aquí sean de interés general para los estudiantes del curso, y no sobre una práctica concreta de un grupo.

Mi consejo es que tratéis de re-escribir las preguntas de una forma más genérica con algún fragmento de código mínimo reproducible y que puedan ser de interés para todos los equipos, no algo concreto sobre una práctica de un grupo concreto.

Seguramente si hacéis el ejercicio de reducir el problema a algo concreto va a ser más fácil que alguien más se haya encontrado con un problema similar y os pueda responder.

[uo269450]

@labra

Quizás se ha malinterpretado mi pregunta cómo particular, pero yo considero que es de ámbito general y no únicamente de nuestro proyecto.

No puedo proporcionar un fragmento del código porque no sé cuál es el error, de ahí que pregunte.

Reformulación más sencilla: Al acceder a una URL desde la barra de búsqueda (a excepción de la raíz "/") en remoto webapp nos devuelve un fallo de get, pero al hacerlo en local con la misma URL nos devuelve la vista bien.

Como digo, que nos pase a nuestro grupo no significa que sea un problema ni mucho menos particular. He encontrado varias entradas en stackoverflow que lo explican, pero no he sido capaz de entenderlas.

[labra]

Pero es importante que trates de acotar el error para encontrar el fragmento mínimo que reproduzca el error.

Cuando un sistema es complejo, con múltiples componentes, como es este caso, es fundamental ir aislando cuál de los componentes está fallando.

Por lo que comentas, parece que las URIs locales no están siendo bien interpretadas en la aplicación desplegada, salvo la URL raíz.

Es difícil averiguar en general dónde está el problema porque pueden intervenir varias cosas, pero una posibilidad es que las URLs locales estén siguiendo un esquema diferente cuando la aplicación es desplegada, lo cual a veces pasa cuando se utilizan URLs relativas, que el sistema las resuelve respecto a la posición en la que se encuentra, y no es la misma posición cuando la aplicación está en local (http://localhost:xxx) que cuando está desplegada (https://yyy.herokuapp.com/...).

Si dices que al acceder a la URL raíz sí funciona, quizá una posible solución sea utilizar siempre URLs que empiecen por la URL raíz, o sea algo del tipo: /aaa/bbb en lugar de aaa/bbb. No sé si éso ya lo has probado.

Si estáis usando React, es posible que lo componentes de React router os pueden ser útiles.

[uo269450]

Gracias por tu respuesta @labra

No, parece que eso no arregla el problema. Ya estamos usando Router. Si quieres consultar nuestro código lo tienes en https://github.com/Arquisoft/radarin_es1b/blob/master/webapp/src/components/BottomNav.jsx , ahí es donde redirigimos las vistas.

No sé si te lo habrán comunicado o no, pero otros equipos con los que he hablado tienen el mismo problema

[labra]

Otra posibilidad que quizá pueda funcionar sería cambiar el router que estáis usando que es un BrowserRouter por un HashRouter en esta línea: https://github.com/Arquisoft/radarin_es1b/blob/0b75c5b3c570e69eb0a37f83622ec8893ee6351c/webapp/src/App.js#L2

Tenéis más información sobre los tipos de routers aquí: https://reactrouter.com/web/guides/primary-components/routers

[moiSS00]

Esta duda la conteste en el foro de preguntas del campus virtual recientemente. Adjunto la respuesta:

Buenos días.

Seguramente el problema es que estáis realizando la navegación del lado del cliente en vez de en el lado del servidor. Por eso os funciona en local, pero no os funciona en Heroku (servidor). En nuestro grupo ya se soluciono este problema. Te pongo a continuación las 2 posibles soluciones encontradas:

1) Seguramente estéis definiendo las rutas dentro del componente "BrowserRouter" de la librería "react-router-dom". Si sustituís ese componente por el "HashRouter" de la misma librería, se solucionaría el problema. Su uso sería exactamente igual que el "BrowserRouter", pero esta solución tiene una desventaja. Te obliga a mantener un carácter especial en las URLs usadas, es decir:

Todas las URLs tienen que hacer uso del carácter "#":

https://servidor/#/

https://servidor/#/amigos

https://servidor/#/mapa

...

2) Hacer uso de Express. En vuestro archivo "server.js" podeís hacer uso de la app creada con Express añadiendo al final del archivo el siguiente código:

app.get('*' , (req, res) => { res.sendFile(path.join(__dirname,'build','index.html')); });

Esto solucionaría el problema. Lo que hace este código es recoger todas las peticiones GET que haga el usuario y redirigirlas al archivo index.html que haya construido en ese momento. Esta es la opción que usamos al final ya que no requiere de caracteres especiales en la URL, pero es más compleja de implementar.

Espero que esta respuesta os haya sido de ayuda.

¡ Un saludo !

[uo269450]

Hola muchas gracias @uo270824 por tu respuesta.

Tengo una duda, el index.html que pones tú ahí en la segunda opción, entiendo que está localizado en el mismo directorio que server.js. Nosotros tenemos un index.js que es el que comienza la vista de toda la aplicación en src/index.js. Tengo que meter la nueva ruta verdad?

dado que server.js está en la raíz, sería:

app.get('*' , (req, res) => { res.sendFile(path.join(__dirname,'build','./src/index.js')); });

Muchas gracias!

[moiSS00]

¡ Hola !

No haría falta modificar la ruta, nosotros tenemos vuestra misma estructura de directorios y la solución nos funcionó perfectamente. Date cuenta que la ruta no es sobre la estructura de directorios de vuestro proyecto en sí, sino que es de la "construcción" de la aplicación que hace Heroku.

Para más detalles, podeís ver el repositorio de nuestro grupo (radarin_es4b).

¡ Un saludo !

[uo269450]

Ahora sí! Muchas gracias por tus respuestas, la segunda opción ha funcionado de perlas.

Para aquellos que lean esto en el futuro, es simplemente cambiar el componente, no hace falta incluir "#" en las rutas, lo gestiona él por sí mismo.

Muchas gracias de nuevo.