• En local hem de poder fer npm run dev i aleshores poder provar l’aplicació a http://localhost:3000/
  • Si això no funciona no cal que seguim fins que ho arreglem
• VUE és més senzill de configurar si està a l’arrel del domini (per quan ho publiquem a PRO, a DEV no hi ha problemes)
• S’han d’utilitzar variables d’entorn per a no haver de tocar el codi abans de pujar a PRO
  • És a dir, quan fem npm run build ell mateix agafarà les variable per a PRO i les integrarà a l’aplicació preparada per pujar (carpeta /dist), i quan fem npm run dev aleshores agafa els valors per desenvolupament i ho podem provar localment
  • Quan editem un fitxer .env s’ha de reiniciar el vite. Les últimes versions ho detecten automàticament i ja es reinicien.

* Crear el projecte i l’estructura bàsica

• npm create vuetify@latest

* Provar que funciona en local

• npm run dev
• i accedir a http://localhost:3000 a on veurem una pàgina “Hello World” de VUE

* Provar de desplegar a producció la versió inicial

• npm run build
• copiar la carpeta /dist a producció

* Definir i utilitzar variables d’entorn * Provar-les a PRE i PRO * Definir i utilitzar rutes * Configurar PRO pq. treballi correctament amb les rutes * Provar-les a PRE i PRO * Afegir funcionalitats * Comprovar i repetir

Si tenim una aplicació VUE molt senzilla, per desplegar-la a producció hem de:

1. Executar l’ordre que ho compilr i ho deixa tot preparat per a PRO
   1. npm run build
   2. això crearà una carpeta /dist amb l’aplicació preparada per a executar-se des d’un client
2. Comprovar que tenim espai al servidor. L’espai ha de ser menor que la quota
3. Hem de connectar-nos via terminal al servidor. Es pot fer amb putty / terminux o des de màquines linux directament amb ssh usuari@màquina
4. L’ordre a executar per veure la quota és:
   1. quota -s

1. Comprar un domini a internet per publicar l’aplicació

Accedir al panell de Hestia i agafar-ne un de l’estil TR1GX.daw.inspedralbes.cat Comprovar que s’ha creat l’estructura de carpetes (public_html…) Si no s’ha creat, el més probable és que tinguem un problema d’espai i hàgim sobrepassat la quota Copiar el contingut de la carpeta ./dist al public_web del labs Accedir a la web del labs i comprovar que funciona.

A l’arrel del projecte VUE, és a dir, a la mateixa carpeta a on hi ha el packages.json hem de crear-hi tres fitxers:

• .env
• .env.local
• .env.production

En el fitxer .env.local hi definim la nostra primera variable, que serà la ruta per accedir a la api del back quan estem desenvolupant:

.env.local

	VITE_URL_BACK="../ruta_de_dev/api"

I en el codi vue podem accedir-hi.

Una forma elegant de fer-ho és amb el següent codi de l’apartat script que ens defineix una “variable” URL_BACK

<script>
export default {
  data() {
    return {
      URL_BACK: import.meta.env.VITE_URL_BACK 
    };
  },
}
</script>

I aleshores des del template podem accedir / mostrar el valor de la variable URL_BACK amb dues claus.

<template>
<div>
	<h1> {{ URL_BACK }}</h1>
</div>
</template>

Amb això ja tindrem una variable desacoplada de l’entorn (dev, pro…) però que ara mateix només té valor quan estem a dev

Hi ha tres fitxers, cadascun amb una funcionalitat i un ús diferent.

1. .env: Hauria de contenir les claus, sense valor. Aquest fitxer SÍ que puja al github, Servirà de mostra per a la resta de desenvolupadors
2. .env.local: Les dades de l’entorn de cada desenvolupador. No puja al GH i per tant, no és compartit.
3. .env.production: Les dades de producció. Sí que puja a github

En executar npm run dev agafa els valors de .env.local Si modifiquem el fitxer el servidor s’ha de reiniciar (però ja ho fa automàticament) En executar npm run build agafa els valors de .env.production i els posa dins de la carpeta “/dist”

Per tant, el què haurieu de tenir són els tres fitxers amb:

• .env

VITE_URL_BACK=«ATENCIÓ, posa la teva ruta a .env.local»

• .env.local

VITE_URL_BACK=«../ruta_de_dev/api»

• .env.local

VITE_URL_BACK=«../ruta_de_PRO/api»

Per què funcion les rutes de VUE a PRO és necessari posar a l’arrel del servidor web (a la carpeta public_html) el següent fitxer:.htaccess per modificar el comportament predeterminat de l’apache2. Bàsicament apache quan rep la petició d’un recurs va a buscar aquest recurs, però les rutes no corresponen a cap recurs (fitxer) real. Per tant, el següent codi li diu a l’apache que quan rep una petició d’un recurs que no existeix, per exemple /llibres, el que ha de fer realment retornar /index.html i, en el navegador, el JS de index.html, llegeix la ruta de la barra d’adreces (/llibres) i decideix què ha de fer.

Aquest fitxer està tret de: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

.htaccess

  <IfModule mod_negotiation.c>
    Options -MultiViews
  </IfModule>
 
  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>

amb aquest fitxer ja funcionaran les rutes i no només la pantalla principal. Per crear bons enllaços cap a les rutes de VUE, cal fer servir el component router-link

<router-link to=«/laMevaPagina»>

Amb això la pàgina seguirà sent SPA, però el navegador seguirà tenint historial