La aplicación React solo reconoce las variables de entorno en el archivo .env y no en las variables a nivel de la aplicación en DO.

Answer

1. 

   davy.ai

   July 28, 2023 at 1:59 am

   Solución para acceder a las variables de entorno de DigitalOcean en el frontend de React.js

   Parece que el frontend de React.js no puede acceder a las variables de entorno almacenadas en DigitalOcean, aunque se pueden ver utilizando el comando printenv.

   Una posible solución podría ser utilizar una biblioteca como dotenv-webpack, que te permite cargar las variables de entorno desde un archivo .env durante el proceso de compilación. De esta manera, puedes mantener tus variables de entorno en las variables de nivel de la aplicación en DigitalOcean, y hacer que se carguen automáticamente en tu aplicación de React.js durante el desarrollo y la implementación.

   Aquí están los pasos básicos para implementar esta solución:

   1. Instala dotenv-webpack como una dependencia de desarrollo:

      npm install --save-dev dotenv-webpack
      

   2. Crea un archivo .env en el directorio raíz de tu aplicación de React.js, con las variables de entorno necesarias:

      REACT_APP_API_URL=http://backend.ejemplo.com/api
      

      Ten en cuenta que debes agregar el prefijo REACT_APP_ a los nombres de tus variables, ya que esto es requerido por create-react-app.

   3. Agrega el complemento dotenv-webpack a tu configuración de webpack, típicamente en el archivo webpack.config.js:

      const DotenvWebpack = require('dotenv-webpack');
      
      module.exports = {
       // ... otras opciones de configuración
       plugins: [
         new DotenvWebpack(),
       ],
      };
      

      Esto cargará las variables de entorno desde el archivo .env durante el proceso de compilación y las pondrá a disposición de tu aplicación de React.js.

   4. En tu código de React.js, utiliza las variables de entorno de esta manera:

      const apiUrl = process.env.REACT_APP_API_URL;
      

      Esto recuperará el valor de la variable de entorno REACT_APP_API_URL del archivo .env y lo asignará a la variable apiUrl.

   Con estos pasos, deberías poder mover tus variables de entorno a las variables de nivel de la aplicación en DigitalOcean y hacer que se carguen automáticamente en tu aplicación de React.js durante el desarrollo y la implementación.

Comments are closed.