Las variables de entorno de Create React App son indefinidas al utilizar Craco build en Heroku.

Estoy desplegando una aplicación Express (Node.js/React) en Heroku y he configurado mis variables de entorno en Heroku utilizando las variables de configuración en la Configuración del Panel de control de Heroku. En el lado del servidor, puedo acceder a ellas utilizando process.env sin problemas. Sin embargo, en mi cliente, mis variables process.env están devolviendo undefined.

Las he prefijado con REACT_APP, y el problema parece estar relacionado con el script craco build en mi client/package.json que se llama durante la fase de compilación del despliegue de Heroku. Si establezco esto en react-scripts build, las variables de entorno se comportan como se espera, sin embargo, mi configuración TailwindCSS falla.

También puedo tener un archivo .env en el cliente, pero necesito diferentes valores dependiendo de la etapa del pipeline de Heroku, y NODE_ENV siempre es "production" una vez desplegado en Heroku, por lo que no puedo pensar en una forma de tener diferentes valores dependiendo de la etapa.

¿Existe una forma de que craco build obtenga las variables REACT_APP de las variables de configuración de Heroku durante el despliegue de la misma manera que lo hace react-scripts build?

davy.ai

May 31, 2023 at 7:55 pm

Sí, hay una forma de obtener las variables REACT_APP de las variables de configuración de Heroku durante la implementación mientras se usa craco build.

Puede usar el paquete dotenv para cargar las variables de entorno desde un archivo .env durante el script craco build. Sin embargo, en lugar de codificar los valores en el archivo .env, puede configurar el archivo para cargar las variables de entorno de forma dinámica utilizando las variables process.env de Heroku.

Aquí hay un ejemplo de cómo podría verse su archivo .env en el cliente:

REACT_APP_API_URL=${process.env.REACT_APP_API_URL}

Luego, en su archivo craco.config.js, puede usar el complemento dotenv-webpack para cargar las variables de entorno desde el archivo .env durante el proceso de compilación agregando el siguiente código:

const dotenv = require('dotenv-webpack');

module.exports = {
  webpack: {
    plugins: [
      new dotenv()
    ]
  }
};

Esto debería permitir que sus variables de entorno REACT_APP se carguen desde las variables de configuración de Heroku durante la implementación usando craco build.

Answer

davy.ai

May 31, 2023 at 7:55 pm
Sí, hay una forma de obtener las variables REACT_APP de las variables de configuración de Heroku durante la implementación mientras se usa craco build.

Puede usar el paquete dotenv para cargar las variables de entorno desde un archivo .env durante el script craco build. Sin embargo, en lugar de codificar los valores en el archivo .env, puede configurar el archivo para cargar las variables de entorno de forma dinámica utilizando las variables process.env de Heroku.

Aquí hay un ejemplo de cómo podría verse su archivo .env en el cliente:
```
REACT_APP_API_URL=${process.env.REACT_APP_API_URL}
```
Luego, en su archivo craco.config.js, puede usar el complemento dotenv-webpack para cargar las variables de entorno desde el archivo .env durante el proceso de compilación agregando el siguiente código:
```
const dotenv = require('dotenv-webpack');

module.exports = {
  webpack: {
    plugins: [
      new dotenv()
    ]
  }
};
```
Esto debería permitir que sus variables de entorno REACT_APP se carguen desde las variables de configuración de Heroku durante la implementación usando craco build.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Las variables de entorno de Create React App son indefinidas al utilizar Craco build en Heroku.

Answer

davy.ai