Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Con el objetivo de que trabajar con la Plataforma sea cada vez más producto productivo se ha incorporado esta capacidad. Así, a partir de la versión 2.1.0-gradius, tendremos la opción de generar clientes JS a partir de APIs de plataforma, primero en React JS, y más adelante en Vue JS también.

...

  • url del ApiManager de op. En caso de no tener desplegado el apimanager ApiManager en local, podemos apuntar al de un entorno en el que sepamos que está deplegadodesplegado, como https://development.onesaitplatform.com por ejemplo.

...

  • url del servidor oauth. En caso de no tener desplegado el servidor oauth de op en local, podemos apuntar al de un entorno en el que sepamos que está deplegadodesplegado, como https://development.onesaitplatform.com por ejemplo.

A continuación ejecutaremos el comando

...

Este comando lanzará nuestra aplicación y se abrirá en el navegador, redirigiéndonos a la pantalla de Login:

...

Si no nos redirige a la página principal tras logarnos, deberemos validar que la respuesta del servicio de autenticación no esté siendo bloqueada por política CORS.

...

Si nos fijamos en el mensaje de error nos indica que nuestro dominio no coincide con el permitido, en este caso ‘http://localhost:3000, http://localhost:3000’. Esto es un error debido a duplicidad de cabeceras. Si nos fijamos en las cabeceras del mensaje de respuesta podemos ver que se está duplicando:

...

Para resolverlo deberemos comentar las directivas en el fichero de configuración del nginx para el OAuth2-server, ya que estas çestas son definidas en la aplicación.

...

Una vez resuelto podemos autenticarnos contra el Identity Manager:

...

Si las llamadas a las apis APIs fallan por política corsCORS, deberemos añadir las cabeceras en la configuración del nginx para el location api-manager.

Ejecución en Producción

En caso de querer generar la app para un entorno productivo modificaremos el fichero .env.production, que tiene las siguientes propiedades:

...

El cual es un alias del comando 'react-scripts build', que genera la app en modo producción dentro de la carpeta build.

...

A continuación generaremos un zip con los contenidos de la carpeta, que será el que subiremos a la plataforma. Dentro del directorio build ejecutamos

...

Para concluir tenemos que crear un nuevo WebProject, al cual le pasaremos el zip que acabamos de generar. Dentro de la pantalla de gestión de WebProjects, creamos uno nuevo:

...

Como nombre del proyecto debemos indicar el nombre que especificamos en el parámetro REACT_APP_BASE_URL, después del path /web/ :

...