Variables de entorno y modos

Hay dos conceptos que necesitamos entender que pueden llegar a ser bastante útiles: 1. Variables de entorno, son variables externas a nuestro proyecto y no son más que un nombre asignado a un valor. 2. Modos, que como lo hemos visto en clases anteriores, existen dos, el modo de desarrollo (dev) y el modo de producción (build).

Modos

Continuemos editando nuestro archivo vite.config.js, pero primero debemos entender que en nuestra función estamos recibiendo algunos argumentos, entre los que destacan command y mode, command es el comando que utilizamos para ejecutar este archivo y mode nos dice si estamos en modo producción o modo desarrollo.

``` import { defineConfig } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080;

console.log(comando: ${command} y modo: ${mode});

return { server: { port }, }; }); ```

Si ejecutamos con dev (npm run dev) veremos que está usando el comando serve y el modo de desarrollo: comando: serve y modo: development

Pero si ejecutamos con build (npm run build) el comando seria build y el modo seria producción: comando: build y modo: production

Esto puede llegar a ser útil porque podemos implementar una lógica dependiendo del modo en que estemos, en el siguiente ejemplo muy básico se imprimirá un mensaje dependiendo del modo.

``` import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080;

console.log(comando: ${command} y modo: ${mode});

if (command === "development") { console.log("Modo desarrollo"); } else { console.log("Modo produccion"); }

return { server: { port }, }; }); ```

Variables de entorno

Para acceder a nuestras variables de entorno debemos de primero crear en la raíz del proyecto un archivo con el nombre .env y dentro de este podremos crear las variables de entorno que necesitemos.

Estructura de una variable de entorno

La estructura de las variables de entorno es la siguiente: VITE_NOMBRE_DE_VARIABLE=valor, como podrás ver es necesario que empiece con la palabra VITE, para que después pueda ser reconocida.

VITE_NAME="vite demo"

Usando variables de entorno

En el anterior ejemplo cree una variable de entorno con el nombre de VITE_NAME, que guardara el nombre de nuestro proyecto. Ahora, para utilizarla dentro de vite.config.js debemos de emplear loadEnv, una función que se importa desde vite y nos entrega todas las variables en el archivo .env.

Tener en cuenta que solo entregara las variables que empiezen con VITE

Acerca de loadEnv

loadEnv recibe dos parámetros, que son: 1. El modo en el que estamos (modo desarrollo o modo producción). Esto debido a que nuestro archivo .env también puede tener el nombre de .env.development o .env.production, si estamos en modo producción se traerán las variables que estén en .env.development, si estamos en modo producción se traerán las variables de .env.production y si no existen ninguno de estos archivos se traerá por defecto las de .env. 2. Ubicación por la cual se accede vía Nodejs para leer el archivo. Para acceder a la ubicación podemos usar process.cwd(), una función de Nodejs que nos entrega la dirección del proyecto.

Ejemplo

A continuación vamos a importar loadEnv, crear una variable con el nombre de env y dentro de esta utilizar la función loadEnv, entregándole los parámetros necesarios.

```import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ command, mode }) => { const port = 8080; const env = loadEnv(mode, process.cwd());

console.log(comando: ${command} y modo: ${mode}); console.log("Variables de entorno:", env);

if (command === "development") { console.log("Modo desarrollo"); } else { console.log("Modo produccion"); }

return { server: { port }, }; }); ```

Por último imprimiremos la variable env y veremos que nos entrega en un formato JSON las variables del archivo .env

Variables de entorno: { VITE_NAME: 'vite demo' }

Recapitulación

Ahora eres capaz de acceder a las variables de entorno, algo muy útil para tu vida profesional, además también puedes saber en qué modo estas y que comando estás utilizando. Te recuerdo que puedes revisar este apartado de la documentación de Vite por si quieres profundizar en el tema.

Contribución creada por: Jofay Zhan Segura