Con el objetivo de que trabajar con la Plataforma sea cada vez más producto 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.
Esta funcionalidad permite seleccionar las APIs de las que quiero generar el CRUD
Se genera un cliente Javascript que ataca a esas APIS, incluyendo además el Login sobre el Identity Manager de Plataforma.
El contenido del fichero descargado, tras ser descomprimido, es el siguiente:
Lo primero que haremos será descargarnos las dependencias ejecutando dentro del directorio client-js:
npm install
Una vez ejecutado tendremos un nuevo directorio node_modules, con todas las dependencias requeridas:
Desarrollo
Si queremos ejecutar la app en local, modificaremos el fichero .env.development, que tiene las siguientes propiedades:
REACT_APP_BASE_URL=
url base de la aplicación
REACT_APP_SERVER=http://localhost:19100
url del ApiManager de op. En caso de no tener desplegado el apimanager en local, podemos apuntar al de un entorno en el que sepamos que está deplegado, como https://development.onesaitplatform.com por ejemplo.
REACT_APP_SERVER_OAUTH=http://localhost:21000
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á deplegado, como https://development.onesaitplatform.com por ejemplo
A continuación ejecutaremos el comando
npm start
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 oauth-server, ya que estas son definidas en la aplicación.
Una vez resuelto podemos autenticarnos contra el oauth:
Si las llamadas a las apis fallan por política cors, deberemos añadir las cabeceras en la configuración del nginx para el location api-manager
Producción
En caso de querer generar la app para un entorno productivo modificaremos el fichero .env.production, que tiene las siguientes propiedades:
REACT_APP_BASE_URL=/web/api-client
url base de la aplicación
REACT_APP_SERVER=https://gradius.onesaitplatform.com/
url del servidor en el que servimos la aplicación
REACT_APP_SERVER_OAUTH=https://gradius.onesaitplatform.com/
url del servidor oauth
PUBLIC_URL=https://gradius.onesaitplatform.com/web/api-client
url pública de la aplicación
Una vez configuradas las propiedades, desde el directorio padre ejecutaremos el comando
npm run build
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
zip -r client-react.zip ./*
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/ :
REACT_APP_BASE_URL=/web/api-client
Tras pinchar en NEW, ya tendremos nuestro WebProject generado y listo para ser utilizado:
A continuación os dejamos un vídeo tutorial que explica cómo se usa esta herramienta.