No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Variables de entorno y modos

14/19
Recursos

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

Aportes 9

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Tambi茅n podemos importar variables de Entorno con el siguiente comando:

import.meta.env.<VariableName>
 

Vite usa dotenv para cargar variables de entorno adicionales desde los siguientes archivos en su directorio de entorno :

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Adicional esta es la documentaci贸n de VITE sobre las ENV Variables de entorno VITE

馃З M谩s acerca de las variables de entorno

Ideas/conceptos claves

Una variable de entorno es una variable din谩mica que puede afectar al comportamiento de los procesos en ejecuci贸n en un ordenador. Son parte del entorno en el que se ejecuta un proceso

Apuntes

  • Generalmente, son secretos que solo una m谩quina en particular debe saber. Ej.: la contrase帽a de la base de datos

    • Permite almacenar una 鈥渃ontrase帽a鈥 donde 煤nicamente nos interesa
  • No deben versionarse

    • Peor a煤n si el repositorio es p煤blico, ya que existe montones de bots automatizados para encontrar estas llaves

    <aside>
    馃挕 En caso de subir por accidente una variable de entorno, no sirve de nada crear otro commit, porque quedar谩 en la historia del repositorio, la mejor soluci贸n es crear otra llave de entorno

    </aside>

驴Qu茅 buscamos?

  1. Los secretos no sean compartidos, pero鈥
  2. Como desarrollador quiero conocer que secretos necesito para que la aplicaci贸n funcione.
    • Debe ser una lista clara la cual especifique que llaves necesito para que la aplicaci贸n no tenga ning煤n problema
  3. La aplicaci贸n debe ser capaz de cargar y leer nuestros secretos

Implementaci贸n

  • Existen diferentes formas de implementar las variables de entorno, una de ellas es la siguiente estructura, donde existe:

Documento de ejemplo

  • Versionado
  • Contiene una lista de llaves necesarias
  • Sin los valores de las llaves 鈬 En el peor de los casos puede existir alg煤n valor, pero es porque nada malo pueda pasar
ACCESS_TOKEN=
URL_DB=

Una copia del documento

  • Ignorado por el versionador (Git).
  • Contiene las llaves necesarias con valores necesarios.
ACCESS_TOKEN=<valor>
URL_DB=<valor>
馃搶 **RESUMEN:** Las variables de entorno, son la mejor forma de poder guardar contrase帽as, llaves, etc. (secretos) ya que estas no son compartidas, establece una lista clara de que secretos necesita la aplicaci贸n para que no se rompa y es capaz de cargar y leer dichos valores de la lista de secretos

Para cambiar el prefijo VITE_ a las variables de entorno, pueden cambiar su configuraci贸n en el archivo de configuraci贸n de vite, modificando la opci贸n envPrefix

// vite.config.js

{
	envPrefix: "PLATZI_"
}

NOTAS DE SEGURIDAD

envPrefix no debe configurarse como 鈥樷, esto expondr谩 todas tus variables env y provocar谩 una filtraci贸n inesperada de informaci贸n confidencial. De todas formas, Vite arrojar谩 un error al detectar 鈥樷.

Un ejemplo de archivo de configuraci贸n con mis comentarios sobre la clase

.env
VITE_PORT=8000
-----

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({command, mode}) => {
	// command es el comando con el que se esta ejecutando en npm run "build"
  // mode es el modo que esta ejecutando ["development", "production"]
  // Estas variables est谩n relacioandas con los scripts de package.json que vimos ["dev", "build"]

	const env = loadEnv(mode, process.cwd())

	if(mode === 'development') // Ejecuto algo
  else // ejecuto otra cosa

  return {
    server: {
      port: env.VITE_PORT
    }
  }
})

El curso mejor explicado de todo plazi. Ojala toros los profesores tuvieran el mismo nivel. Enhorabuena!!

Tambi茅n tengan en cuenta que para que esto tenga sentido el archivo .env no debe subirse nunca al repositorio en la nube, es decir estar en el .gitignore

Estoy viendo que el file 鈥.env鈥 todo lo que se escriba debe ir sin espacio, es cierto, no?

te pasaste diana cual es tu Twitter para seguirte!!!

Carga de variables de entorno en un contexto de acceso a las configuraciones de vite para modo produccion y modo desarrollo