Estoy tratando de establecer algunas variables de entorno (para realizar llamadas API a puntos finales dev/prod, claves según dev/prod, etc.) y me pregunto si funcionará el uso de dotenv.
Instalé dotenv y estoy usando webpack.
La entrada de mi paquete web es main.js , por lo que en este archivo puse require('dotenv').config()
Luego, en la configuración de mi paquete web, puse esto:
new webpack.EnvironmentPlugin([ 'NODE_ENV', '__DEV_BASE_URL__' //base url for dev api endpoints ])Sin embargo, aún no está definido. ¿Cómo puedo hacer esto correctamente?
Lo siento por retomar la vieja pregunta, pero
react-scripts en realidad usa la biblioteca dotenv bajo el capó.
Con react-scripts@0.2.3 y superior, puede trabajar con variables de entorno de esta manera:
.env
REACT_APP_BASE_URL=http://localhost:3000Aplicación.js
const BASE_URL = process.env.REACT_APP_BASE_URL;Ver documentos para más detalles.
La respuesta corta es no. Un navegador no puede acceder a las variables de entorno locales o del servidor, por lo que dotenv no tiene nada que buscar. En su lugar, especifica variables ordinarias en su aplicación React, generalmente en un módulo de configuración.
Se puede hacer que Webpack tome variables de entorno de la máquina de compilación y las hornee en sus archivos de configuración. Sin embargo, funciona reemplazando cadenas en tiempo de compilación, no en tiempo de ejecución. Por lo tanto, cada compilación de su aplicación tendrá los valores codificados en ella. Estos valores serían accesibles a través del objeto process.env .
var nodeEnv = process.env.NODE_ENV; Además, puede usar DefinePlugin para webpack que le permite especificar explícitamente diferentes valores según su objetivo de compilación (dev, prod, etc.). Tenga en cuenta que debe JSON.stringify todos los valores que se le pasan.
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') }),Esto está bien para cualquier tipo de información pública, pero nunca debe usarse para ningún tipo de claves privadas, contraseñas o secretos de API . Esto se debe a que los valores integrados son de acceso público y podrían usarse de forma malintencionada si contienen detalles confidenciales. Para ese tipo de cosas, debe escribir un código del lado del servidor y crear una API simple que pueda autenticarse con la API de terceros utilizando los secretos, luego pasar los detalles relevantes a su aplicación del lado del cliente. Su API del lado del servidor actúa como intermediario, protegiendo sus secretos mientras obtiene los datos que necesita.
En realidad, puede usar dotenv en su aplicación React con webpack. Además, hay varias formas de hacerlo. Sin embargo, tenga en cuenta que sigue siendo una configuración en tiempo de compilación.
Una forma similar a la respuesta anterior. dotenv en la configuración de su paquete web y usa DefinePlugin para pasar las variables a su aplicación React. En este blog se puede encontrar una guía más completa sobre cómo puede inyectar sus archivos .env dependiendo de la configuración actual.
Usando un dotenv-webpack . Personalmente lo encuentro muy conveniente. Supongamos que tiene entornos: dev , staging y prod . Usted crea un archivo .env para cada entorno ( .env.dev , .env.staging , etc.). En la configuración de su paquete web, debe elegir un archivo correcto para el entorno:
const Dotenv = require('dotenv-webpack'); module.exports = (env, argv) => { const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env'; const config = { ... plugins: [ new Dotenv({ path: envPath }) ] }; return config; };Cuando crea la aplicación para un entorno en particular, simplemente pase el nombre del entorno a webpack:
webpack --config webpack.config.js --env.ENVIRONMENT=dev