Skip to content

F. Environments

Jump to bottom
nikoDev edited this page Dec 5, 2023 · 1 revision

Entornos de ejecución

Rama enlazada

Bien ahora que ya tenemos una base vamos a configurar vite par acceder a sus variables de entorno, de esta manera la url del recurso estará acorde al entorno de ejecución. Si se usa CI es recomendable configurar las variables de entorno en el servidor. Para esta prueba de concepto usaremos archivos .env

Para ver el ejemplo acceder a Rama environments

Hemos cambiado el archivo de configuración de vite para acceder al recurso remoto de manera dinamica.

TS arroja un error de tipos el cual se salva instalando la libreria de tipos de node @types/node como dependencia de desarrollo.

Por último debemos crear el archivo .env.local en el cual colocaremos la variable de entorno con la url del recurso.

Como extra podriamos decir que teniendo en cuanta esta técnica podriamos crear custom scripts con la variante mode indicando el entorno de ejecución.

Por ejemplo:

  "scripts": {
    "dev": "vite",
    "dev:mode-example": "vite --mode staging",     <------- Script de prueba
    "staging": "vite build --mode staging",
    "build": "tsc && vite build",
    "build:watch": "tsc && vite build --watch",
    ......
  },

Ahora creamos el archivo .env.staging y agregamos nuestra variable de entorno de prueba:

VITE_EXAMPLE_URL="http://urldeprueba.com"

Vite mode

En el App.tsx agregamos

console.log(import.meta.env.VITE_EXAMPLE_URL)

Ejcutamos en la consola

    $ yarn dev:mode-example

De esta manera veremos en la consola del navegador la url: http://urldeprueba.com

Clone this wiki locally