¿Cómo puedo obtener mis variables de Heroku en mi carpeta de react?

Tengo una aplicación de react que utiliza la pila MERN (mongo, express, react, node) en heroku.
Tengo algunas variables de entorno almacenadas en Heroku que se leen en la raíz de mi proyecto. Sin embargo, la aplicación de react real está anidada dentro de una carpeta del proyecto. Aquí está la estructura de archivos.

Mi variables de entorno se llaman REACTAPPAUTH0CLIENTID, REACTAPPAUTH0DOMAIN y REACTAPPMONGODBURI. Estas variables de entorno están disponibles en el archivo server.js en la raíz del proyecto. Sin embargo, no están disponibles en la carpeta client (mi aplicación de react). ¿Cómo puedo configurar esto para que las variables de entorno de Heroku fluyan a través del proyecto completo?
Si agrego un archivo .env dentro de la carpeta client, puedo acceder a esas variables. Parece que react no puede acceder a las variables de entorno fuera de la aplicación de react en sí.

Esto es lo que tengo en el archivo package.json en la raíz del proyecto: imagen

¡Cualquier ayuda sería muy apreciada!

davy.ai

July 21, 2023 at 12:32 pm

Para hacer que las variables de entorno estén disponibles en la carpeta del cliente, puedes usar el paquete dotenv.

Instala dotenv ejecutando el siguiente comando en la terminal:
```
npm install dotenv
```
Crea un archivo .env en la carpeta del cliente y agrega las variables de entorno que deseas utilizar en la aplicación React. Por ejemplo:
```
REACT_APP_AUTH0_CLIENT_ID=<valor>
REACT_APP_AUTH0_DOMAIN=<valor>
REACT_APP_MONGODB_URI=<valor>
```
En el archivo server.js, agrega la configuración dotenv para cargar las variables de entorno desde el archivo .env principal:
```
require('dotenv').config();
```
En el código del cliente, ahora puedes acceder a las variables de entorno utilizando process.env.REACT_APP_<nombre_variable>. Por ejemplo:
```
const auth0ClientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const auth0Domain = process.env.REACT_APP_AUTH0_DOMAIN;
const mongodbUri = process.env.REACT_APP_MONGODB_URI;
```
Ten en cuenta que necesitas agregar el prefijo REACT_APP_ al nombre de la variable para que esté disponible en la aplicación React.

Al usar el paquete dotenv, puedes cargar variables de entorno desde múltiples archivos .env en diferentes partes del proyecto.

Answer

davy.ai

July 21, 2023 at 12:32 pm
Para hacer que las variables de entorno estén disponibles en la carpeta del cliente, puedes usar el paquete dotenv.
1. Instala dotenv ejecutando el siguiente comando en la terminal:
```
npm install dotenv
```
2. Crea un archivo .env en la carpeta del cliente y agrega las variables de entorno que deseas utilizar en la aplicación React. Por ejemplo:
```
REACT_APP_AUTH0_CLIENT_ID=<valor>
REACT_APP_AUTH0_DOMAIN=<valor>
REACT_APP_MONGODB_URI=<valor>
```
3. En el archivo server.js, agrega la configuración dotenv para cargar las variables de entorno desde el archivo .env principal:
```
require('dotenv').config();
```
4. En el código del cliente, ahora puedes acceder a las variables de entorno utilizando process.env.REACT_APP_<nombre_variable>. Por ejemplo:
```
const auth0ClientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const auth0Domain = process.env.REACT_APP_AUTH0_DOMAIN;
const mongodbUri = process.env.REACT_APP_MONGODB_URI;
```
  Ten en cuenta que necesitas agregar el prefijo REACT_APP_ al nombre de la variable para que esté disponible en la aplicación React.
Al usar el paquete dotenv, puedes cargar variables de entorno desde múltiples archivos .env en diferentes partes del proyecto.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo obtener mis variables de Heroku en mi carpeta de react?

Answer

davy.ai