Payara, Web content

Del post anterior pueden observar que tenemos 2 servicios que la idea es usarlos en al menos una pequeña aplicación web, esta estará creada con las siguientes dependencias:

  • Preact
  • Redux
  • Ramda
  • Less

Para ello tomaremos como base la plantilla que he creado para una aplicación React. . Las instrucciones de como usarla están en el README de ese repo.

Configurando el ambiente de desarrollo

La plantilla usa webpack como herramienta de construcción del sitio, pero solo nos enfocaremos a la parte puramente web, los servicios no estarán en Nodejs sino en nuestra aplicación que desarrollamos en Payara, pero no vamos a estar haciendo dos cambios en el código compilando y desplegando para ver que el cambio funciona, ya tenemos los servicios, entonces los dejamos corriendo en el server como si fuera un servidor de servicios cualquiera y crearemos la aplicación con webpack-dev-server.

Pero oh sorpresa, dos cosas importantes:

- La primera es que el servidor Payara hace un binding a la ip del servidor en el que inicias la aplicación
- Necesitaríamos CORS si quisiéramos usar los servicios desde el web-dev-server hacia el server java.

Pero aqui estar las soluciones, Payara nos permite ejecutar comandos antes y después de inicializar el server, especificados en archivos de texto. Por tanto vamos a crear un archivo de texto llamado pre-commands.txt
Y pegamos este texto:

 

Al iniciar el server solo usa la propiedad correspondiente "java -jar payara-micro-5.183.jar --deploy PayaraMicro-0.0.1.war --prebootcommandfile pre-commands.txt" listo tenemos bindings hacia localhost, ya podremos usar . Ahora el segundo problema, para no habilitar CORS en nuestros servicios, web-pack-devserver nos permite crear un proxy-server (a este punto debes tener instalado Nodejs, npm, clonado el repo de la plantilla React y haber hecho npm install).

Busca en la plantilla el archivo webpack.config.js y modifica la propiedad devServer, reemplaza su contenido por:

 

Listo hemos configurado un proxy para web-pack-devserver que consumira nuestros servicios como si tuviéramos instalada la app dentro del servidor payara.

Desarrollando la app

Como dije en lugar de usar React vamos a usar Preact, que es como que lo mismo pero mas barato (mas pequeño solo 3Kb gziped). Para eso vamos a necesitar los siguientes cambios:

En el archivo .babelrc reemplaza el contenido por esto:

 

En la consola ejecuta:

 

Y listo podemos comenzar con la app, Básicamente serán dos componentes que muestran la lista de preguntas y uno para capturar las preguntas. La estructura del proyecto sera:

dist
|----index.html
src
|----question
|----store
styles

El primer archivo contiene el punto de entrada y la inyección de redux en el componente base estará en src y se llama app.js
 

Ahora vamos a crear el componente base de la aplicación, este sirve para mostrar diferentes modulos de la aplicación, modificar el estado general, mostrar cosas como loaders, alertas o cosas que afecten toda la app. Este es un container de redux y por tanto estará conectado a redux es un statefull component y estará igual en src con nombre AppContainer.js

 

Ahora vamos a crear el reducer del Container principal que viene siendo el reducer de la app en general, de momento solo tenemos un control para decir si hay llamadas ajax o si no hay, este archivo estará igual en src de nombre appModule.js

 

Ahora las piezas centrales de redux en nuestra app, el store y el estado inicial. Creamos un archivo en la carpeta store de nombre index.js :

 

El siguiente archivo es initialState.js en la misma carpeta y como su nombre lo dice es el estado inicial de la aplicación, aquí veremos la estructura principal de datos de toda la app sirve también como diccionario para saber que modulo controla que cosa:

 

Como vez tiene dos modulos, preguntas y el modulo general de la aplicacion que solo controla las llamadas Ajax. Ahora vamos a construir los elementos de las preguntas. Primero el modulo de las preguntas, para saber que tantas cosas puede hacer el modulo de preguntas, creamos un archivo de nombre questionModule.js en la carpeta question:

 

Y pues solo podemos obtener las preguntas, agregar una pregunta y mostrar o no el formulario de preguntas. Ahora el contenedor que estará conectado a esta información, creamos un archivo llamado QuestionContainer.js igual en la carpeta question:

 

Este muestra o el formulario de preguntas o la lista de preguntas dependiendo de en que estado estemos. Ahora vamos a agregar la lista de Preguntas, creamos un archivo de nombre QuestionList.js igual en la carpeta question:

 

Este ya es un componente stateless, y solo recibe la lista de preguntas para crear una tabla y cada fila de la tabla es un component pregunta, así que debemos crear ese componente en la misma carpeta question, porque seguimos haciendo cosas del modulo preguntas, agregamos un archivo llamado Question.js con ese contenido:

 

Otro componente tonto que solo pinta un row de una tabla por cada pregunta. Finalmente necesitamos agregar el componente que nos permita agregar una nueva pregunta, en la misma carpeta question agregamos un archivo de nombre QuestionForm.js:

 

Ahora nos falta crear el api que envíe las peticiones al back para poder obtener y guardar la información. Es un api de preguntas por lo que estará en la carpeta question y tendrá por nombre questionApi.js:

 

De momento como te darás cuenta los errores los ignoro, pero eso cambiara conforme la app crezca, otra cosa a notar que estamos usando los estilos de pure.css, pero ya no tenemos la todoApp de la aplicación en el template. Entonces en la carpeta less borra la carpeta todoModule y cambia el nombre del archivo pure.css por pure.less y dentro de app.less coloca este contenido:

 

Listo, hemos terminado el ejemplo. Solo nos falta ejecutar en la consola “npm run dev-server” e ir a la pagina

Ver las preguntas:

Agregar pregunta:

Pregunta agregada:

Siguientes pasos

Lo que sigue es hacer la version “productiva” de la aplicación, es decir sin web-devserver sino con Payara entregando tanto el html como el css y el js. Eso lo veremos en el siguiente post. Si quieres comparar archivos contra lo que yo escribí, estos son los repositorios: