Antes de desplegar nuestro proyecto Portal UI en local, es necesario añadir variables de entorno. Para esto, crearemos un nuevo archivo en la raíz del proyecto, llamado .env.local, que incluirá las siguientes variables:
| Bloque de código |
|---|
VUE_APP_API_ENVIRONMENT=https://micampusdesa.um.es
VUE_LOCAL_URL=atica-67-543.atica.um.es |
La primera corresponde a la dirección por la que se proxyfican las llamadas a /api, como las de login, por ejemplo. En la segunda, tenemos que indicar nuestro dominio .um.es, no se puede utilizar localhost. El que hay es sólo un ejemplo, cada uno tendrá que poner el suyo.
Ahora sí, para desplegar el proyecto en local, en la barra lateral de VS Code veremos una pestaña Scripts NPM (si no la vemos, hacemos click derecho sobre el título de cualquiera de las otras pestañas y seleccionamos esta para activarla). Ahí, tendremos varias opciones, cada una de ellas corresponde a un comando definido en el archivo package.json. Para desplegar el proyecto en local, utilizaremos Desplegar un proyecto Vue en local para hacer pruebas es sencillo. En Visual Studio Code, en la sección izquierda, donde tenemos el explorador de archivos del proyecto, está la pestaña NPM Scripts. Si la desplegamos, veremos la opción serve. Sólo tendremos que pulsar en el símbolo de play, el triángulo, que aparece cuando ponemos el cursor encima.
Los scripts disponibles se especifican en package.json. Estos comandos también podemos ejecutarlos desde la terminal introduciéndolos a mano. También podemos añadir nuestros comandos si es necesario.
Para el caso del despliegue, hay dos parámetros que es importante conocer:
Si el proyecto no tiene problemas o errores que solucionar, veremos esto en la terminal:
Nos indica la ruta en la que está desplegada, que será la que indiquemos en la variable de entorno que hemos mencionado antes, y por defecto utiliza el puerto 8000
...
–port 8081: para seleccionar el puerto en el que se despliega. Por defecto es el 8080, pero si está ocupado buscará en el 8081, y así sucesivamente, y esto lo hace también cuando se incluye este parámetro.
...
.