créer une application qui ne récupère pas les fichiers .env?

Question

Je suis à l'aide de créer réagir app pour lancer mon application.

J'ai ajouté deux .env fichiers .env.development et .env.production à la racine.

Mon .env.development comprend:

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

Quand je lance mon application en utilisant react-scripts start et console out process.env il crache

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

J'ai essayé différentes choses, mais il est tout de ne pas reprendre le veriables dans mon fichier de prospection, ce que je fais mal?!

Directry la structure est:

/.env.development
/src/index.js

Package.json script est:

"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",

Edit:

@jamcreencia correctement souligné mon variables doivent être préfixées avec REACT_APP.

Edit 2

Cela fonctionne bien si j'ai le nom du fichier .env mais pas si j'utilise .env.development ou .end.production

Answer 1

Avec create-react-app , vous devez préfixer REACT_APP_ au nom de la variable pour pouvoir y accéder.

Exemple:

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

Voir plus d'infos ici

Answer 2

Assurez-vous que votre fichier .env se trouve dans le répertoire racine et non dans le dossier src.

Answer 3

Eu ce même problème! La solution consistait à fermer la connexion à mon serveur de noeud (vous pouvez le faire avec CTRL + C). Ensuite, redémarrez votre serveur avec 'npm run start' et .env devrait fonctionner correctement.

Source: Github

Answer 4

Si vous souhaitez utiliser plusieurs environnements tels que .env.development .env.production

utiliser le paquet dotenv

ajouter .env.development et .env.production dans le dossier racine du projet

et votre 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"   
},
 

puis construire en fonction de l'environnement comme

 npm run-script build-dev 
 

Answer 5

Pour cela, il existe env-cmd module. Installer via npm npm i env-cmd alors package.json fichier scripts section:

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

Dans votre racine du projet, vous devez créer deux fichiers avec le même env variables, mais avec des valeurs différentes:

.env.development
.env.production

Alors les exclure de public. Pour cela, dans votre .gitignore fichier ajouter deux lignes:

.env.development
.env.production

C'est donc une bonne façon d'utiliser les différentes variables d'environnement de dev et de prod.