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

Aportes 4

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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
    }
  }
})

🧩 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 “contraseñ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 ‘’.