reactjs - react - ¿Desea crear una aplicación que no recoja archivos.env?

run react app

Question

Estoy usando crear la aplicación reaccionar para arrancar mi aplicación.

He añadido dos archivos .env.development y .env.production en la raíz.

Mi .env.development incluye:

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

Cuando ejecuto mi aplicación con react-scripts start y consola fuera process.env se escupe

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

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

La estructura de Directry 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 señaló correctamente que mis variables deberían tener el prefijo REACT_APP .

Editar 2

Funciona bien si .env el archivo .env pero no si uso .env.development o .end.production

Answer 1

Con create-react-app , debe prefijar REACT_APP_ al 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í

Answer 2

Para ello existe el módulo env-cmd . Instálelo a través de npm npm i env-cmd luego en su archivo package.json en la sección de scripts :

 "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 exclúyelos del público. Para esto en su archivo .gitignore agregue dos líneas:

.env.development
.env.production

Así que esta es una forma adecuada de usar diferentes variables env para dev y prod.

Answer 3

Si desea utilizar varios entornos como .env.development .env.production

usar el paquete dotenv

agregue .env.development y .env.production en la carpeta raíz del proyecto

y tu paquete.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 construir de acuerdo con el entorno como

npm run-script build-dev 

Answer 4

Si el archivo .env funciona pero .env.development o .env.production no, cree un archivo .env vacío junto a esos dos. No sé por qué, pero esto funciona para mí.