Desplegar una App node.js con openUI5 en Foundry

Hace poco hice el tutorial de como desplegar una App node.js en foundry, y me encantó lo fácil que es. He oído hablar realmente bien de node y tengo pendiente trastear con el desde hace mucho, pero si tengo que aprender a usar varias tecnologías a la vez oy a ir muy lento: otro front end (React y Angular son los mas utilizados en el pack js-all-in-one), otra base de datos (Mongo es la que generalmente se utiliza por estar muy ligada a javascript) así que me planteé la opción de utilizar openUI5 como front. No he encontrado mucha información al respecto y bastante de la que hay es de hace unos años y está desactualizada, así que me ha costado más de lo que pensaba poder ponerlo a punto, pero aquí está el mega-tutorial en español de como montar un servidor en node usando openUI5!

A este stack lo han bautizado como NEMO (Node Express MongoDB y OpenUI5) un nombre bastante más molón que MEAN (Mongo Express Angular y Node) o MERN (Mongo Express React y Node) aunque para este simple ejercicio vamos a prescindir de una base de datos, más adelante ya veremos como enlazarlo con una base de datos Hana.

En primer lugar necesitaremos una herramienta con la que montar todo esto, yo utilizo Visual Studio Code (que para programar en javascript va genial) e instalar node. Usando el comando node -v en nuestro terminal podemos saber que versión tenemos y así nos aseguramos de que está instalado correctamente. También podemos comprobar que tenemos instalado npm (es un gestor de paquetes que vamos a utilizar para instalar librerías de Node):

Montamos un servidor con node

Es bastante más simple de lo que parece. Primero vamos a publicar una web con un hola mundo en texto plano para comprobar que funciona correctamente. Creamos un archivo server.js (se le puede dar el nombre que quieras, pero es el que se suele utilizar):

const http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('Hello World!');
}).listen(3000);

Si ejecutamos el archivo server mediante el comando node server.js ya tendremos creado el servidor node publicando en el puerto 3000 nuestro hola mundo:

Muy bien, esto marcha! Pero para crear nuestra App no es lo que vamos a necesitar, así que modificamos el archivo server.js para que escuche el puerto 3000. Vamos a necesitar Express, así que primero vamos a la ruta donde vamos a crear nuestra App oui5foundry e instalamos allí la librería Express:

Al hacerlo se creará un archivo package-lock.json y un directorio node_modules en el directorio de nuestra App:

Modificamos el archivo server.js:

const   express = require('express'),
        app = express();
app.listen(3000, function () {
    console.log('Escuchando puerto 3000');
});

Si lo ejecutamos mediante el comando node server.js ya tendremos creado nuestro servidor node. Pero si volvemos a entrar al localhost:3000 veremos el siguiente mensaje:

No preocuparse, es normal. Explicarlo daría para un articulo entero, así que de momento os tendréis que fiar de mí.

Preparamos el cliente web

Vamos a crear el árbol de directorios para construir nuestro front-end.

En clients/routes vamos a crear un archivo routes.js para indicar donde buscar el archivo index.html:

'use strict';
const path = require('path');

module.exports = function (oApp) {
    oApp.get('/', function (req, res) {
        res.sendFile(path.join(__dirname, '../webapp/', 'index.html'));
    });
}

Modificamos el server.js para que haga uso del routes:

const   express = require('express'),
        app = express();

app.use(express.static(__dirname + '/client/webapp'));
require('./client/routes/routes.js')(app);

app.listen(3000, function () {
    console.log('Escuchando puerto 3000');
});

Y ya tenemos el servidor montado preparado para mostrar nuestra web con openUI5, ahora tan solo hay que construir la web y copiar el contenido en la carpeta webbapp.

Para acelerar las cosas he usado el template SAPUI5 Application del webIDE para crear una web muy sencillita:

Descargamos el proyecto (seguro que vuestra web de pruebas está más trabajada que la mía) y copiamos la carpeta webapp en la ruta oui5foundry/client:

Hay que cambiar el sap-ui-bootstrap del index.html para que use la librería openUI5, ya que ahora no tiene acceso a la librería sapUI5 (aunque también se podría descargar cualquiera de las 2 y usarlas localmente, pero cuidado con las licencias de sapUI5).

 <script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize"
    data-sap-ui-resourceroots='{"pgrsap.openUI5": "./"}'
    data-sap-ui-compatVersion="edge"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-frameOptions="trusted">
</script>

Ejecutamos nuevamente el server.js y tachaaaaaan!

Ya tenemos nuestro servidor node con openUI5 para el front-end, con esto podríamos desarrollar nuestro front-end sin necesidad de utilizar el webIDE (y si descargamos la librería podremos programar sin necesidad de estar conectados a Internet, aunque sin stackoverflow 🙁 ).

Desplegar en foundry

El último paso es desplegar nuestra pedazo de App en foundry, para eso necesitamos una cuenta de SCP con acceso a foundry, con una trial es más que suficiente.

Vamos a crear un archivo package.json en el que definir nuestra App para que sea ejecutable por el servidor donde se despliega, podemos hacerlo a mano o mediante el comando npm init, que nos irá pidiendo datos, este es el archivo que me ha generado:

{
  "name": "oui5foundry",
  "version": "1.0.0",
  "description": "My firts NEMO App",
  "main": "server.js",
  "dependencies": {
  "express": "^4.16.4"
},
  "devDependencies": {},
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js"
},
  "author": "Jorge de programandosap.com",
  "license": "ISC"
}

También tenemos que definir el archivo manifest.yaml, para indicarle a foundry como desplegar la App,

---
applications:
- name: oui5foundry
  random-route: true
  path: oui5foundry
  memory: 128M

Es importante crearlo en el directorio raíz, no en el directorio de la App:

En el archivo server.js le hemos indicado que escuche en el puerto 3000 para probar en local pero en el servidor el puerto que necesita es process.env.PORT, así que hacemos un pequeño cambio para que use el puerto que corresponde y a la vez funcione en local:

app.listen(process.env.PORT || 3000, function () {
    console.log('Escuchando puerto 3000');
});

Ya solo nos queda instalar la librería que se encarga de conectar con foundry y desplegar nuestra App allí. La librería se llama Cloud Foundry Command Line Interface y la podeis descargar desde su repositorio de github (para windows es un simple .exe). Una vez instalada, mediante el comando cf api endpoint (cf api https://api.cf.eu10.hana.ondemand.com si como yo usas el de Frankfurt) y cf login se crea la conexión (nos irá pidiendo datos como el usuario, password,…). El endpoint se puede consultar entrando en la cuenta trial, es fijo dependiendo de la localización:

Desde el directorio donde está el archivo yaml ejecutamos el comando cf push y con eso desplegamos nuestra App. Si da algún error podemos ver mas informacion con el comando cf.exe logs oui5foundry –recent y si todo ha ido bien se nos mostrará un mensaje como este, en el que en «rutas» podemos ver la url de nuestra App:

Y entrando en esa url, tatatachaaaaan!

Y eso es todo, espero que os haya sido útil y pidáis para vuestro cumpleaños un servidor foundry con el que jugar mientras SAP se decide a quitar la limitación de 90 días.