web-dev-qa-db-fra.com

créer une application ne ramassant pas les fichiers .env?

J'utilise créer une application pour bootstrap 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

Lorsque j'exécute mon application avec react-scripts start et que je console process.env, il se défait

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

J'ai essayé différentes choses, mais ce n'est tout simplement pas de récupérer les variables dans mon fichier de développement. Qu'est-ce que je fais de travers?!

La structure de la direction est:

/.env.development
/src/index.js

Le script Package.json 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",

Modifier:

@jamcreencia a correctement souligné mes variables devrait être préfixé avec REACT_APP.

Éditer 2

Cela fonctionne bien si je nomme le fichier .env mais pas si j’utilise .env.development ou .end.production

reactjscreate-react-app
41
shenku

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

87
jamcreencia

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

utiliser 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
8
Maria Jeysingh Anbu

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

8
Ryan Dhungel

Pour cela, il existe un module env-cmd . Installez via npm npm i env-cmd puis dans votre fichier package.json dans la section scripts:

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

Dans la racine de votre projet, vous devez créer deux fichiers avec les mêmes variables env, mais avec des valeurs différentes:

.env.development
.env.production

Puis les exclure du public. Pour cela, dans votre fichier .gitignore, ajoutez deux lignes:

.env.development
.env.production

C'est donc une manière appropriée d'utiliser différentes variables env pour dev et prod.

3
Nastro

En ce qui concerne env-cmd . Selon le type de VMois publication sur gitHub , env-cmd a été mis à jour (version 9.0.1 au moment de l'écriture), environnement Les variables fonctionneront comme suit sur votre projet React :

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

Dans votre fichier package.json .

3
tim

Si le fichier .env fonctionne mais que .env.development ou .env.production ne fonctionne pas, créez un fichier .env vide à côté de ces deux fichiers. Je ne sais pas pourquoi mais ça marche pour moi.

2
Stjepan Golemac

Avait 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

2
Joe