Integrar front y back de la App y mantenerla en ejecución

Ya hemos creado nuestra aplicación aquí y le hemos puesto un editor WYSIWYG aquí, por lo que ya es el momento de desplegar nuestro proyecto.

Para hacer esto debemos centrarnos en la consola del sistema, modificaremos un par de lineas de los packages.json y finalmente usaremos el paquete PM2 para mantener y monitorizar las aplicaciones en corriendo en nodeJS

Abrimos el archivo dxcc-tutorial/server/config.json y cambiamos el puerto por defecto

{
..
   "port": 3000
..
}

y ponemos el que queramos (que no esté ocupado)

En todos los archivos que usemos axios tendremos que sustituir el puerto por el nuevo que hemos configurado.

Para evitar que se muestre el explorador de loopback, en el archivo dxcc-tutorial/server/component-config.json , cambiamos

{
  "loopback-component-explorer": {
    "mountPath": "/explorer",
    "generateOperationScopedModels": true
  }
}

por

{
  "loopback-component-explorer": null
}

Yo he creado una copia como backup con el mountPath y el generateOperationScopedModels por si en un futuro necesito ver el explorador.

Abrimos el archivo dxcc-tutorial/client_src/package.json y editaremos la linea con el comando del build. Como al ejecutarse este comando, se genera todo el código del proyecto en la carpeta build vamos a añadir a la orden un comando para que nos copie el resultado en dxcc-tutorial/client/, debe quedar así

"build": "react-scripts build && cp -r build/* ../client/",

También modificaremos el archivo dxcc-tutorial/server/middleware.json ya que en el json aparece

"files": {},

para que cuando este el proceso corriendo se muestre como pagina principal el proyecto que se ha construido pondremos

"files": {
    "loopback#static": {
      "params":"$!../client"
    }
},

Y por ultimo en el archivo dxcc-tutorial/server/boot/root.js cambiamos la linea

router.get('/', server.loopback.status());

por

router.get('/');

Y con esto ya tenemos todo listo para ejecutar el comando build así que en dxcc-tutorial/client_src ejecutamos

npm run build

Cuando finalice la ejecución, si arrancamos el servidor de loopback con

node .

y navegamos a http://localhost:<nuestro_puerto> podemos ver que la pagina principal muestra

Para mantener el proyecto corriendo yo he optado por PM2, la instalación segun su pagina web es

npm install pm2 -g

Una vez instalado, si el servidor es linux y el proceso de inicio systemd, ejecutaremos el comando

pm2 startup systemd

nos responderá una linea parecida a

sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u <tu_usuario> --hp /home/<tu_usuario>

esta linea la debemos copiar y pegar en la consola y ejecutarla. Para comprobar que todo esta funcionando correctamente podéis ejecutar

sudo systemctl status pm2-<tu_usuario>.service

Si en el Active aparece active (runing) esta funcionado correctamente. Lo siguiente sería ejecutar desde la carpeta del proyecto.

pm2 . --name "nombre__app"

Debéis tener en cuenta que si paráis el demonio pm2 cuando lo reactivéis hay que hacer el comando anterior en los diferentes proyectos que tengáis.

Y con esto ya hemos acabado la guía, como siempre si hay alguna duda dejarlo en los comentarios.

Un saludo