Variables de Entorno en Webpack para Proyectos Seguros
Resumen
¿Cómo trabajar con variables de entorno en un proyecto que crece?
Cuando trabajas en proyectos complejos que deben ser compartidos con otros miembros del equipo, es crucial considerar el manejo de las variables de entorno. Estas te permiten configurar elementos específicos sin exponer información sensible en el código fuente. En este contexto, el uso de variables de entorno mejora la seguridad y flexibilidad del proyecto en conjunto con herramientas como Webpack.
¿Cómo se instalan las dependencias necesarias?
Para manejar correctamente las variables de entorno, primero es necesario instalar una dependencia. Este paso implica abrir la terminal y ejecutar el siguiente comando:
npminstall --save-dev dotenv-webpack
Esta dependencia es para desarrollo, lo que significa que no será utilizada en el entorno de producción.
¿Cómo se configuran los archivos de entorno?
El siguiente paso es configurar los archivos necesarios en tu proyecto. Debes crear dos archivos clave en la raíz de tu proyecto:
.env - Este archivo contendrá tus variables de entorno localmente. Es importante asegurarse de que no se suba al repositorio por motivos de seguridad.
.env.example - Un archivo que refleja las variables de entorno necesarias para el proyecto, pero sin sus valores. Sirve como plantilla para otros desarrolladores.
Por ejemplo, en el archivo .env, podrías definir:
API=https://randomuser.me/api
Y en .env.example:
API=
¿Cómo se configura Webpack para usar variables de entorno?
La integración de las variables de entorno con Webpack es esencial para que estos valores sean utilizados en el proyecto. Aquí se describen los pasos:
En el archivo de configuración de Webpack, empieza por introducir la constante requerida:
constDotenv=require('dotenv-webpack');
Luego, en la sección de plugins, añade el nuevo plugin:
plugins:[newDotenv()]
¿Cómo se integran las variables de entorno en el código JavaScript?
Una vez configurado Webpack, es momento de integrar las variables de entorno en tu código. Esto se logra accediendo a ellas mediante process.env.
Supón que necesitas la URL de una API. En tu código, usarías la variable de entorno previamente definida de la siguiente manera:
const apiUrl = process.env.API;
Esta técnica asegura que información sensible, como URLs de API o claves de acceso, estén protegidas y solo accesibles en el entorno local o de producción configurado.
¿Cuál es el procedimiento para preparar el proyecto para producción?
El último paso es compilar y preparar el proyecto para producción. Esto se hace ejecutando en la terminal el comando:
npm run build
Este comando compila el proyecto utilizando las configuraciones establecidas, garantizando que todo funcione correctamente.
Al seguir estos pasos, asegurarás que variables importantes de configuración estén bien gestionadas, aumentando la seguridad y la eficiencia del proyecto. No olvides adaptarte al uso de diferentes archivos de configuración para distintos entornos de desarrollo, lo cual es una práctica esencial cuando se envían proyectos a producción. ¡Sigue aprendiendo y personalizando tus proyectos para maximizar su robustez y eficiencia!
dotenv-webpack ⇒ Leera el archivo .env por defecto y lo agregar a nuestro proyecto
Para usarlas debes hacer lo siguiente
const nombre = process.env.NOMBRE_VARIABLE;
Toda la configuración se podrá acceder desde process.env
Es importante saber que las variables de entorno (NODE js),
.env
por convencion se escriben en Mayuscula y con formato SNAKE_CASE
process.env.API_APP
Gracias
Las variables de entorno son variables externas a nuestra aplicación que residen en el sistema operativo o en el contenedor de la aplicación que se está ejecutando. Una variable de entorno es simplemente un nombre asignado a un valor como una variable es cualquier lenguaje de programación.
Aquí te dejo esta lectura super genial de variables de entorno
Usualmente los framework de frontend como vue o react ya soportan el uso de variables de entorno de manera nativa, existe alguna ventaja adicional de hacerlo con webpack?
Hasta ahora no he visto una sola ventaja de webpack más que la de optimizar tu código a una sola linea.
Los framework utilizan empaquetadores...
En clases pasadas hubo varios comentarios quejándose de que Óscar no explicaba para qué servía cada cosa (entre ellos el mío), que solo lo decía como una receta. Pero en esta clase ha explicado para qué sirven las variables de entorno y ha comentado ejemplos de uso. ¡Muchas gracias, Óscar!
más sobre process💻
Si no sabes de dónde viene ese objeto process te recomiendo que cheques esta clase del curso de fundamentos de node (es más, todo el curso).
.
Pero, en resumen, process es un objeto global que viene instalado con Node.js (¿recuerdas? la forma de ejecutar Javascript del lado del servidor💻) y sirve para escuchar eventos del programa que estás creando. ¿Esto significa que la app que estoy programando es un proceso? Es correcto.
.
En computación tanto tu CPU como tu GPU son capaces de correr múltiples procesos y dentro de cada proceso hay un hilo. Es decir, tu programa es un proceso que tiene distintos módulos enfocados a hacer diferentes cosas, cada una de ellas siendo un hilo. De esta forma, puedes usar Node.js para averiguar información del programa que estás construyendo. Puedes determinar funciones que hagan algo cuando se encienda o termine tu programa process.on, puedes acceder a variables de entorno process.env, puedes manejar errores, etc.
Gran aporte, gracias
Al fin entiendo lo que es una variable de entorno!! :D
Variables de entorno
Cuando el proyecto se hace más grande y otras personas van a trabajar en él, usamos estas variables que hacen referencia a un punto específico del proyecto.
En webpack usaremos npm i dotenv-webpack -D
Creamos un archivo .env y este NO se sube al repositorio.
Creamos un archivo .env.example que tendrá las variables vacías, este sí se puede subir al repositorio.
Sabes si uso dotenv-webpack y quiero usar variables de entorno en el archivo de configuración de webpack, tengo que tambien instalar dontenv o puedo usar el dotenv-webpack? o debo instalar ambos?
Para los que les sale el error "Failed to load ./.env." deben agregar a su configuración en plugins el path para que webpack lo pueda encontrar.
newDotenv({path:"./src/.env",}),
Si quedan ocultas estas variables? En la clase se pude ver que la API tiene el valor de la variable de entorno dentro del archivo main.js.
Excelente pregunta Carlos!
De que van a estar en el archivo final las llaves, si estarán expuestas, por ello se debe tener una buena estructura de seguridad entre Backend y Frontend, podrás ver como por ejemplo en el Curso de Integración de Backend y Frontend que se tiene una estrategia adicional a una API Key que es a través de Tokens
Las variables de entorno las empece a usar hace poco, y la verdad es que resuelven la vida. Sobretodo si vas a usar distintas bases de datos para producción y desarrollo por ejemplo.
A mi no me funciono la font desde el primer momento, no se que hice mal
Sube una captura de tu código para que veamos que esta fallando :)
Agrega esto en fontn en el file webpack.config.js:
oigan alguien puede ayudarme trato de usar mi npm run build pero aunque si termina me sale el mensaje Failed to load ./.env.
alguien sabe como lo puedo solucionar ? les adjunto fotos:
intenta cambiar de ubicacion el archivo, a mi me marcaba el mismo error por que lo habia creado dentro de la carpeta dist sin que yo me diera cuenta XD, tiene que estar en la misma ubicacion que el webpack config pero tambien le pudedes cambiar con la propiedad "path" la ubicacion del archivo .env, en el webpack.config
Por ejemplo: Yo hago una base de datos de mis productos (E-commerce), con una variable de entorno yo protejo mi información de cualquier persona ? Obvio, sólo el desarrollador la sabría.
las variables de entorno sirven por ejemplo, para las credenciales de base de datos de tu e-commerce.
ya que al ejecutar cualquier consula a la base no se mostrara desde front de la web. (para ver mejor esto, se puede consultar la seccion "network" de nuestro navegador, y ahi vez toda la informacion que viaja desde la pagina [uncamente lo visible, excluyendo el dato de la variable de entorno])
Gracias por tu respuesta.
recordemos que el archivo .env debe estar por fuera del src y si no funciona despues de instalar ( npm install -D dotenv-webpack) deberás eliminar la carpeta node_modules y el archivo package-lock.json
