Estoy usando la siguiente variable de entorno en mi aplicación create-react:
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 al ejecutar una compilación de 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" } }Me imagino que ya tienes esto funcionando, pero para cualquier otra persona que encuentre esto, configura tus variables de entorno predeterminadas en un archivo .env en la raíz de tu 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 development , por lo que utilizará automáticamente el archivo .env.development , y npm run build establecerá REACT_APP_NODE_ENV en production , por lo que utilizará automáticamente .env.production . Los valores establecidos en estos anularán los valores en su .env .
Si está trabajando con otras personas y tiene valores específicos solo 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.
EDITAR: 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 se especifica en este comentario .
Puede usar process.env.NODE_ENV así:
const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL; Debería tener REACT_APP_PROD_API_URL y REACT_APP_DEV_API_URL configurados.
O, si la URL de producción es siempre la misma, podrías simplificarla:
const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL; Create React App establece NODE_ENV en 'producción' para usted en la compilación, por lo que no necesita preocuparse por cuándo configurarlo en producción.
Nota: debe reiniciar su servidor (por ejemplo, ejecutar npm start de nuevo) para detectar cambios en las variables de entorno.
Si desea tener archivos dotenv separados para compilar y/o implementar en entornos separados (etapa, producción), puede usar env-cmd de la siguiente manera:
npm install --save-dev env-cmd ./node_modules/.bin/env-cmd -f ./stage.env npm build Luego simplemente actualice su package.json en consecuencia:
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "build:stage": "env-cmd -f ./.stage.env npm run-script build" },Luego, para compilar, simplemente ejecute este comando de shell:
npm run build:stage