...

La ejecución de scripts está deshabilitada en este sistema

Si al ejecutar un proyecto en VS Code nos da el siguiente error:

npm : No se puede cargar el archivo C:\Users\nosequien\AppData\Roaming\npm\npm.ps1 porque la ejecución de scripts está deshabilitada en este sistema. Para obtener más información, consulta el 
tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170.
En línea: 1 Carácter: 1
+ npm run serve
+ ~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException       
    + FullyQualifiedErrorId : UnauthorizedAccess

Tendremos que abrir Powershell como administrador y ejecutar el siguiente comando:

Set-ExecutionPolicy Unrestricted

Llamadas locales funcionan en Chrome pero no en Firefox

Cuando utilizamos tanto el ui como la api en local, podemos encontrarnos que las llamadas en Chrome funcionan correctamente pero no en Firefox (y por lo tanto el portal entra en bucle). Esto se debe a que en Firefox hay que darle a confiar en el certificado tanto en el puerto del ui como en el del back. Para ello, podemos hacer esto:

1. Accedemos a https://midireccion.atica.um.es:8000, cambiando mi dirección por nuestra dirección local.
   Image Added
2. En esta pantalla le damos a Avanzado y a Aceptar el riesgo y continuar.
3. Accedemos a https://midireccion.atica.um.es:8080, cambiando mi dirección por nuestra dirección local (hemos cambiado el puerto por el del backend).
4. Lo mismo, Avanzado y Aceptar.
5. A partir de ahí, ya deberían funcionar nuestras llamadas al backend, así que ya podemos probar nuestra aplicación.

"vue" no se reconoce como un comando

...

this.variableBooleana = (this.$route.query.variableBooleana === "true");

Si lo dejamos como string, en el caso de un booleano, hay que tener en cuenta que si hacemos un if, este siempre se evaluará a true con un string, lo que puede llevar a comportamientos inesperados, tanto en el template como en el script. En resumen, tenemos que comprobar que tenemos true y no "true".

Error al hacer npm ci: Conflicting peer dependency

Si nos salta este error, probablemente es por la versión de npm que tenemos instalada. Si el package-lock.json se ha generado con una versión anterior a la 8.6.0, y nosotros tenemos esa o una posterior, nos dará ese error. Un ejemplo de traza del error:

peter.parker@18C04D0658E7 MINGW64 ~/Desktop/Practicas/portal-ui (formacion)
$ npm ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @intlify/vue-i18n-loader@4.1.0
npm ERR! Found: vue-i18n@9.2.0-beta.25
npm ERR! node_modules/vue-i18n
npm ERR!   vue-i18n@"9.2.0-beta.25" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional vue-i18n@"^9.0.0" from @intlify/vue-i18n-loader@4.1.0
npm ERR! node_modules/@intlify/vue-i18n-loader
npm ERR!   dev @intlify/vue-i18n-loader@"^4.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue-i18n@9.1.9
npm ERR! node_modules/vue-i18n
npm ERR!   peerOptional vue-i18n@"^9.0.0" from @intlify/vue-i18n-loader@4.1.0
npm ERR!   node_modules/@intlify/vue-i18n-loader
npm ERR!     dev @intlify/vue-i18n-loader@"^4.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\jpeter.parker\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\peter.parker\AppData\Local\npm-cache_logs\2022-04-05T13_19_56_565Z-debug-0.log

Para solucionarlo, tendremos que ponernos la versión 8.5.5 de npm, y lo haremos ejecutando este comando:

npm i -g npm@8.5.5

Con eso ya deberíamos poder descargar las dependencias correctamente.

Una alternativa, si no queremos volver a esa versión, es ejecutar el comando npm ci con -force:

npm ci -force

Esto también debería descargar las dependencias correctamente.

Error "Failed to execute 'open' on 'XMLHttpRequest': Invalid URL" al probar teniendo tanto el UI como la API en local

Haciendo pruebas en local, teniendo desplegados tanto el UI como el backend, podemos encontrarnos con que al entrar en nuestra aplicación entramos en un bucle que nos lleva constantemente al login, y en la consola del navegador nos salen estos errores:

Image Added

Esto se debe (al menos en varios casos que han sucedido) a que las URLs de hateoas no se están formando bien en local. Esto es, si tenemos un método así en nuestro servicio.api.js (cambiando servicio por el que sea):

hateOAS: (url) => (
    url ? apiRequest({ url: url.replace(environmentURL, '') }) : Promise.reject(new Error('sin URL'))
  ).then((response) => response.data),

El replace no se hace correctamente, por lo tanto tendremos que cambiarlo para probar en local. Añadiremos la siguiente función:

function limpiarUrl(url) {
  if (url.startsWith('http')) {
	// + 11 para quitar '.um.es:8000'
    return url.substring(url.search('.um.es') + 11);
  }
  return url;
}

Con el replace original quitaríamos apidesa.um.es, apitest.um.es o api.um.es, dejando sólo el resto del path del endpoint, por ejemplo, /acade/noseque.

Y sustituiremos el replace por dicha función:

hateOAS: (url) => (
    url ? apiRequest({ url: limpiarUrl(environmentURL) }) : Promise.reject(new Error('sin URL'))
  ).then((response) => response.data),

¡OJO! Este cambio no se debe incluir en ningún commit, no se debe subir, es únicamente para probar en local llamando a la API desplegada también en local.

Por último, como lo que estamos haciendo es que la llamada sea a "/acade/noseque", tendremos que indicar en nuestro .env.local la url de nuestro backend en local, y las rutas para las que queramos que se llame a dicho backend, por ejemplo:

# URL del API para desarrollo en local
VUE_APP_BACKEND=https://atica-67-165.atica.um.es:8080
# Si se necesitan varias rutas, separar por espacios en la misma linea
VUE_APP_BACKEND_ROUTES=/acade