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

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

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í

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

¡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

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 

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 .

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.

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'

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.

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

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)