NG Frontend

Descripción

Este manual indica como hacer la instalación del backend de OrfeoNG v1.0 partiendo de los fuentes en un Debian 12 o Ubuntu 22.04 o Windows XAMP.

Prerequistos

Arrancamos con un Linux preferible Kuine-LAMP v6 o Kuine-LAMaP v6 actualizado o con un Windows usando XAMP configurado según esta guia.

Instalación

1. Descargue el frontend del repositorio

$> git clone https://aruba.skinatech.com/Orfeo-NG/ng_frontend.git

y en el directorio creado ng_frontend corra

$> npm --legacy-peer-deps install

para instalara todos las dependencias con algunas dependencias obsoletas

npm WARN deprecated @types/prosemirror-view@1.24.0: This is a stub types definition. prosemirror-view provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-state@1.4.0: This is a stub types definition. prosemirror-state provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-schema-list@1.2.0: This is a stub types definition. prosemirror-schema-list provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-model@1.17.0: This is a stub types definition. prosemirror-model provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-keymap@1.2.0: This is a stub types definition. prosemirror-keymap provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-inputrules@1.2.0: This is a stub types definition. prosemirror-inputrules provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-commands@1.3.0: This is a stub types definition. prosemirror-commands provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/prosemirror-history@1.3.0: This is a stub types definition. prosemirror-history provides its own type definitions, so you do not need this installed.
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated eivindfjeldstad-dot@0.0.1: Use @eivifj/dot instead
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated popper.js@1.15.0: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated protractor@7.0.0: We have news to share - Protractor is deprecated and will reach end-of-life by Summer 2023. To learn more and find out about other options please refer to this post on the Angular blog. Thank you for using and contributing to Protractor. https://goo.gle/state-of-e2e-in-angular
npm WARN deprecated tslint@6.1.3: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated core-js@3.1.3: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

OJO: Esto no debe existir … found 19 vulnerabilities (6 moderate, 13 high)

Verifique como quedo

$> ng version

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
   

Angular CLI: 16.2.10
Node: 18.12.1 (Unsupported)
Package Manager: npm 9.2.0
OS: linux x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1402.10
@angular-devkit/build-angular      14.2.10
@angular-devkit/core               14.2.10
@angular-devkit/schematics         14.2.10
@angular/cdk                       14.2.7
@angular/cli                       14.2.10
@angular/material                  14.2.7
@angular/material-moment-adapter   14.2.7
@schematics/angular                14.2.10
rxjs                               6.6.7
typescript                         4.6.4
   
Warning: The current version of Node (18.12.1) is not supported by Angular.

2. Edite los archivos de configuracion

En ng_frontend/src/environments toca editar environment.prod.ts y el environment.ts

$> cp environment.ts.dist environment.ts   (para devel )

$> cp environment.prod.ts.dist environment.prod.ts (para produccion)
$> ln -s environment.prod.ts environment.ts  (necesita ambos iguales)  **

Cambie los servidores

apiUrl: ‘http://demong1.skinatech.com/ng_backend/api/web/’,

frontUrl: ‘http://demong1.skinatech.com/orfeo-ng/’,

SOCKET_ENDPOINT: ‘http://demong1.skinatech.com:3005’,

En las implementaciones comerciales, es decir proyectos implementados por nosotros se debe poner orfeoNgExpress en false

orfeoNgExpress: {
ocultarModulos: false,
limitarCreacion: 60,
limitarCreacionUsuarios: 5,
}

llaveAES: ‘aegoh3quai3Aijum7cae0theifo}uv’, (esta es la misma que coloco en ng_backend/api/config/params-local.php)

captchaSiteKey: ‘6Lc8_d4UAAAAANK-6A3w_lP6Crr6BJzT9ldbK_iO’, (para el uso de recaptcha de google .. obligatorio)

Los hash no deben cambiar .. se puede hacer por el menu de consola en kuine

3. Pruebe que funciona local

$> ng serve --host 0.0.0.0

Debe mostrar compiling … !!! y no ningun error

4. Construya el distribuirle para producción

Como vamos a usar Apache como servidor de aplicaciones vamos a «compilar» los fuentes

$> ng build --prod

Esto se demora bastante y toca ponerle memoria (4G min) para que lo complete ademas .. es bueno limitarlo con

$> export NODE_OPTIONS="--max-old-space-size=2048"

** En Amazon es bueno usar un t3.small con 2G de swap .. para compilar .. luego se puede bajar

5. Ubicar carpeta generada de la aplicación

Luego de ejecutar el comando anterior, se debe ubicar la carpeta «orfeo-ng» generada en la ruta «ng_frontend/dist/orfeo-ng» y moverla a la ruta base del servidor «/var/www/html» para que pueda ser accedida desde el navegador

https://192.168.8.27/orfeo-ng

6. Verifique que el firewall local le permite – Linux / Kuine

$>firewall-cmd  --zone=external --list-all

Deben aparecer los puertos, si no .. toca agregarlos

$> firewall-cmd  --zone=external --permanent --add-service=http                                                                           
$> firewall-cmd  --zone=external --permanent --add-port=3005/tcp                                                                           
$> firewall-cmd  --reload

Trucos

1. Quitar / Activar el recaptcha

UPDATE `csInicial` SET `estadoCsInicial` = ‘0’ WHERE `csInicial`.`idCsInicial` = 1;

Orfeo NG - Nueva Generación