Posteriormente a consultar especialistas en esta materia, programadores de deferentes áreas y maestros dimos con la solución a la pregunta y la compartimos en este post.
create-react-app las variables de entorno deben tener el prefijo REACT_APP_:
Nota: debe crear variables de entorno personalizadas que comiencen con REACT_APP_. Cualquier otra variable excepto NODE_ENV será ignorada para evitar exponer accidentalmente un privado key en la máquina que podría tener el mismo nombre. Cambiar cualquier variable de entorno requerirá que reinicie el servidor de desarrollo si se está ejecutando.
de la documentación “Agregar variables de entorno personalizadas”.
Debería agregar estas variables de entorno a su .env archivo(s) en lugar de agregarlos a su .bash_profile expediente. Se recogerá el archivo apropiado dependiendo de la compilación (es decir, start o build), y la aplicación será más fácil de compartir e implementar.
La forma en que lo hago es tener un archivo .env (agregarlo a .gitignore) en la raíz de mis archivos de proyecto.
Dentro de ese archivo, defino las variables de entorno de mi proyecto (las variables adicionales se pueden separar agregando cada una a su propia línea):
NODE_ENV=development
Luego, usando el módulo dotenv npm, puedo acceder a los valores en cualquier archivo webpack (o archivo expressJS del lado del servidor, por ejemplo).
// in the command line
$ npm install --save dotenv
// at the top of the webpack config file
require('dotenv').config();
// in the plugins of the webpack config
plugins: [
new webpack.DefinePlugin(
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
)
],
Ahora puedo hacer referencia a ella dentro de mi aplicación transpilada por webpack:
console.log(NODE_ENV); // development
Comentarios y valoraciones de la guía
Recuerda algo, que tienes concesión de decir .