¿Crear una aplicación de reacción que no recoja archivos .env?


110

Estoy usando la aplicación create react para arrancar mi aplicación.

He agregado dos .envarchivos .env.developmenty .env.productionen la raíz.

Mi .env.developmentincluye:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

Cuando ejecuto mi aplicación usando una react-scripts startconsola process.env, escupe

{ NODE_ENV: "development", PUBLIC_URL: "" }

He intentado cosas diferentes, pero simplemente no recojo los verificables en mi archivo de desarrollo, ¿qué estoy haciendo mal?

La estructura de la dirección es:

/.env.development
/src/index.js

El script Package.json es:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

Editar:

@jamcreencia apuntado correctamente a mi variables deben tener el prefijo con REACT_APP.

Editar 2

Funciona bien si le pongo un nombre al archivo, .envpero no si utilizo .env.developmento.end.production


¿Puedes publicar tu package.jsonarchivo?
Steve Chamaillard

2
process.enves algo que el back-end (Node o lo que sea que estés usando) puede leer. El paquete de front-end no tiene idea de qué process.enves ya que se ejecuta en el navegador. Puede configurar el paquete web para pasarlo en el paquete al empaquetar, o incluso más fácil, puede pasarlo desde el back-end en el archivo de índice que está representando como una variable global.
Raul Rene

probablemente no sea el caso, pero me he encontrado con esto un par de veces y el problema que encontré es que cuando mi computadora está usando mucha memoria, no consigo cargar mi variable .env. Yo uso ubuntu 16.4. intente cargar la variable desde el terminal react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbacksi aún no los ve, reiniciaría mi sistema para reducir el uso de memoria e intentarlo de nuevo, por lo general, esto me resuelve.
Femi Oni

@RaulRene create-react-app maneja .env de fábrica para que no necesite más configuraciones
Femi Oni

Respuestas:


229

Con create-react-app, debe prefijar REACT_APP_el nombre de la variable para poder acceder a ella.

Ejemplo:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

Ver más información aquí


8
Esto es vital. Me lo perdí, pero sí, no funcionará con el prefijo
Femi Oni

7
Esto funciona cuando lo uso .envpero no para .env.developmento .env.production?
shenku

@shenku ¿Se las arregló para averiguar por qué funciona solo con .envy no con .env.developmentyenv.production
Constantin Chirila

Para los desarrolladores que realizan trabajo de front-end, debido a que no tienen NodeJs en el navegador, necesitarán un paquete web ... meh
Stephane

2
Gracias. Llevo horas buscando una respuesta.
Fahmid

53

Asegúrese de que su archivo .env esté en el directorio raíz, no dentro de la carpeta src.


1
Aunque, mientras leía la documentación vi que debería estar en el directorio raíz, aun así logré agregar mi archivo .env en la carpeta src ... (facepalm) Gracias por tu respuesta.
Corné

Tuve el mismo problema, no funcionó cuando estaba dentro de la carpeta src pero funcionó después de pasar a la carpeta raíz en la versión 3.4.3
Vinod Kumar

28

¡Tenía el mismo problema! La solución fue cerrar la conexión a mi servidor de nodo (puede hacer esto con CTRL + C). Luego reinicie su servidor con 'npm run start' y .env debería funcionar correctamente.

Fuente: Github


20

Si desea utilizar múltiples entornos como .env.development .env.production

usar el paquete dotenv-cli

agregar .env.developmenty .env.productionen la carpeta raíz del proyecto

y su package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

luego construya de acuerdo con el entorno como

npm run-script build-dev 

es esto dotenvo dotenv-cli?
Drazen Bjelovuk

2
Tener diferentes archivos .env para diferentes entornos ahora también es compatible con create-react-app: create-react-app docs . No es necesario usar dotenv explícitamente (create-react-app en realidad lo usa detrás de escena para manejar variables de entorno)
Marnix.hoh

@MariaJeysinghAnbu, esa sintaxis pertenece dotenv-cli, no dotenv: npmjs.com/package/dotenv-cli
AMS777

@ AMS777 Estoy usando dotenv npm no dotenv-cli
Maria Jeysingh Anbu

@MariaJeysinghAnbu, quería usar dotenvpero recibí un error. Revisé la documentación pero no encontré esa -eopción para la línea de comando. Sin embargo, lo encontré en la dotenv-clidocumentación. Por eso estaba diciendo. Finalmente estoy usando env-cmd, no tener dotenve dotenv-cliinstalar al mismo tiempo, lo que puede generar confusión.
AMS777

10

Con respecto a env-cmd . Según la amable publicación de VMois en gitHub , env-cmd se ha actualizado (versión 9.0.1 al momento de escribir), las variables de entorno funcionarán de la siguiente manera en su proyecto React :

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

En su archivo package.json .


1
Muchas gracias, este comentario me salvó. La documentación de create-react-app no ​​ha actualizado esto, así que estaba averiguando qué está mal
CKA

1
Me salvaste totalmente aquí. Estaba dando vueltas en esta cosa. Gracias
MDiesel

que alguien le dé una medalla a este chico
Rittesh PV

7

Para ello existe el módulo env-cmd . Instale a través de npm y npm i env-cmdluego en su package.jsonarchivo en la scriptssección:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

En la raíz de su proyecto, debe crear dos archivos con las mismas variables env pero con valores diferentes:

.env.development
.env.production

Luego, excluirlos del público. Para esto en su .gitignorearchivo agregue dos líneas:

.env.development
.env.production

Entonces, esta es una forma adecuada de usar diferentes variables env para dev y prod.


intente usar la ruta completa, como: ./node_modules/.bin/env-cmd
Nastro

pero no recomiendo el enfoque en mi respuesta. Ahora sé que reaccionar da una mecánica de construcción para trabajar con .env
Nastro

6

Tenía el mismo problema, pero era porque tenía mi archivo .env en formato YAML en lugar de JS.

Era

REACT_APP_API_PATH: 'https://my.api.path'

pero necesitaba ser

REACT_APP_API_PATH = 'https://my.api.path'

Un lugar tan simple pero bueno. Yo había hecho lo mismo y no podía ver la madera por los árboles. Gracias
Andy Allison

¡Gracias por esto! Estuve buscando todo el día sin notar este pequeño error :)
chia yongkang

3

Si el .envarchivo funciona pero .env.developmento .env.productionno, crea un .envarchivo vacío junto con esos dos. No sé por qué, pero esto me funciona.


0

Y recuerde no tener un punto y coma después de la clave API en el archivo env.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

debiera ser

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

ese fue mi error


-1

A partir de los últimos scripts de reacción (3.2.0) es tan simple como decir

PORT=4000
BROWSER=none

en su archivo .env o .env.development (..etc) que se supone que está en la carpeta raíz.

NO funcionará con el prefijo REACT_APP (los documentos están desactualizados, supongo) y NO requiere ningún paquete npm adicional (react-scripts ya incluye dotenv 6.2.0)


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.