reactjs - example - react env files

¿Cómo configurar las variables.env de compilación cuando se ejecuta el script de compilación create-react-app?

Question

Estoy usando la siguiente variable de entorno en mi aplicación crear-reaccionar:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

Funciona cuando ejecuto npm start leyendo un archivo .env :

REACT_APP_API_URL=http://localhost:5555

¿Cómo configuro un valor diferente como http://localhost:1234 cuando npm run build una npm run build ?

Este es mi archivo package.json :

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

Me imagino que ya está funcionando, pero para cualquier otra persona que encuentre esto, configure sus variables de entorno predeterminadas en un archivo .env en la raíz de su proyecto "create-react-app".

Para separar las variables utilizadas al usar npm start y npm run build , puede crear dos archivos env más: .env.development y .env.production .

npm start establecerá REACT_APP_NODE_ENV en el development , por lo que utilizará automáticamente el archivo .env.development , y npm run build conjuntos de npm run build REACT_APP_NODE_ENV en la production , y así utilizará automáticamente .env.production . Los valores establecidos en estos .env los valores en su .env .

Si está trabajando con otras personas y solo tiene valores específicos para su máquina, puede anular los valores en .env.development y .env.production agregando esos valores a un nuevo archivo: .env.development.local y .env.production.local respectivamente.

EDIT: debo señalar que las variables de entorno que ha establecido deben comenzar con "REACT_APP_", por ejemplo. "REACT_APP_MY_ENV_VALUE".

EDIT 2: si necesita más que solo desarrollo y producción, use env-cmd , como lo especifica este comentario .

Answer 2

Puedes usar el process.env.NODE_ENV manera:

const apiUrl = process.env.NODE_ENV === ''production'' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

Necesitarías tener REACT_APP_PROD_API_URL y REACT_APP_DEV_API_URL establecidos.

O, si la URL de producción es siempre la misma, podría simplificarla:

const apiUrl = process.env.NODE_ENV === ''production'' ? ''https://example.com'' : process.env.REACT_APP_DEV_API_URL;

La aplicación Create React establece la NODE_ENV en ''producción'' para usted en la compilación, por lo que no necesita preocuparse por cuándo establecerla en producción.

Nota: debe reiniciar su servidor (p. Ej., Ejecutar npm start nuevamente) para detectar cambios en las variables de entorno.