create respond app nie odbiera plików .env?

117

Używam aplikacji Create React do załadowania mojej aplikacji.

Dodałem dwa .envpliki .env.developmentiw .env.productionkatalogu głównym.

Moje .env.developmentobejmuje:

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

Kiedy uruchamiam moją aplikację za pomocą react-scripts startkonsoli i process.envwypluwa ją

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

Próbowałem różnych rzeczy, ale po prostu nie wychwytuję zmiennych w moim pliku programistycznym, co robię źle ?!

Struktura Directry to:

/.env.development
/src/index.js

Skrypt Package.json to:

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

Edytować:

@jamcreencia słusznie zauważył moje zmienne powinny być poprzedzone z REACT_APP.

Edytuj 2

Działa dobrze, jeśli nadam nazwę plikowi, .envale nie, jeśli użyję .env.developmentlub.end.production

reactjs create-react-app

— shenku
źródło

Czy możesz opublikować swój package.jsonplik?

— Steve Chamaillard

2

process.envjest czymś, co zaplecze (Node lub cokolwiek innego) może odczytać. Pakiet front-end nie ma pojęcia, co process.envjest, ponieważ działa w przeglądarce. Możesz skonfigurować pakiet internetowy, aby przekazywał go w pakiecie podczas tworzenia pakietu, a nawet łatwiej możesz przekazać go z zaplecza w pliku indeksu, który renderujesz jako zmienną globalną.

— Raul Rene

prawdopodobnie tak nie jest, ale napotkałem to kilka razy, a problem, który znalazłem, polega na tym, że gdy mój komputer używa dużo pamięci, nie ładuje się mojej zmiennej .env. Używam ubuntu 16.4. spróbuj załadować zmienną z terminala, react-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbackjeśli nadal ich nie widzisz, zrestartowałbym system, aby zmniejszyć zużycie pamięci i spróbuj ponownie, zwykle to rozwiązuje problem.

— Femi Oni

@RaulRene create-react-app obsługuje .env po wyjęciu z pudełka, ponieważ nie potrzebujesz dalszej konfiguracji

— Femi Oni

245

W programie create-react-appmusisz poprzedzić REACT_APP_nazwę zmiennej, aby mieć do niej dostęp.

Przykład:

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

Zobacz więcej informacji tutaj

— jamcreencia
źródło

9

To jest bardzo ważne. przegapiłem to, ale tak, to nie zadziała z prefiksem

— Femi Oni

8

To działa, gdy używam, .envale nie dla .env.developmentlub .env.production?

— shenku

@shenku Czy udało ci się dowiedzieć, dlaczego działa tylko z .envi nie z .env.developmentienv.production

— Constantin Chirila

Dla programistów wykonujących prace nad front-endem, ponieważ nie masz NodeJ w przeglądarce, będziesz potrzebować pakietu webpack ... eee

— Stephane

2

Dziękuję Ci. Od godzin szukałem odpowiedzi.

— Fahmid

62

Upewnij się, że plik .env znajduje się w katalogu głównym, a nie w folderze src.

— Ryan Dhungel
źródło

1

Chociaż podczas czytania dokumentacji zobaczyłem, że powinna znajdować się w katalogu głównym, nadal udało mi się dodać mój plik .env do folderu src ... (facepalm) Dziękuję za odpowiedź.

— Corné

Miałem ten sam problem, nie działało, gdy znajdowałem się w folderze src, ale działało po przejściu do folderu głównego w wersji 3.4.3

— Vinod Kumar

tak to jest problem, dziękuję bardzo

— akash maurya

29

Miałem ten sam problem! Rozwiązaniem było zamknięcie połączenia z moim serwerem węzłów (możesz to zrobić za pomocą CTRL + C). Następnie uruchom ponownie serwer za pomocą polecenia „npm run start”, a plik env powinien działać poprawnie.

Źródło: Github

— JS Peterson
źródło

21

Jeśli chcesz korzystać z wielu środowisk, takich jak .env.development .env.production

użyj pakietu dotenv-cli

dodaj .env.developmenti .env.productionw folderze głównym projektu

i plik 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"   
},

następnie buduj zgodnie ze środowiskiem, np

npm run-script build-dev

— Maria Jeysingh Anbu
źródło

czy to jest dotenvczy dotenv-cli?

— Drazen Bjelovuk

2

Posiadanie różnych plików .env dla różnych środowisk jest teraz również obsługiwane po wyjęciu z pudełka przez dokumentację create -ago-app: create-aware-app . Nie ma potrzeby jawnego używania dotenv (aplikacja create-react-app faktycznie używa go za kulisami do obsługi zmiennych środowiskowych)

— Marnix.hoh

@MariaJeysinghAnbu, ta składnia należy do dotenv-cli, a nie dotenv: npmjs.com/package/dotenv-cli

— AMS777

@ AMS777 Używam dotenv npm nie dotenv-cli

— Maria Jeysingh Anbu

@MariaJeysinghAnbu, chciałem użyć, dotenvale wystąpił błąd. Sprawdziłem dokumentację, ale nie znalazłem tej -eopcji dla wiersza poleceń. Jednak znalazłem to w dotenv-clidokumentacji. Dlatego mówiłem. W końcu używam env-cmd, a nie mam dotenvi dotenv-cliinstaluję w tym samym czasie, co może prowadzić do nieporozumień.

— AMS777

10

Odnośnie env-cmd . Zgodnie z uprzejmym postem VMois na gitHubie , env-cmd został zaktualizowany (wersja 9.0.1 w chwili pisania), zmienne środowiskowe będą działać w twoim projekcie React w następujący sposób :

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

W pliku package.json .

— tim
źródło

1

Dziękuję bardzo, ten komentarz mnie uratował. Dokumentacja aplikacji create-react-app nie aktualizowała tego, więc zastanawiałem się, co jest nie tak

— CKA

1

Całkowicie mnie tu uratowałeś. Kręciłem się nad tym. Dziękuję

— MDiesel

ktoś

— wręczy

7

Do tego celu służy moduł env-cmd . Zainstaluj przez npm, npm i env-cmda następnie w swoim package.jsonpliku w scriptssekcji:

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

W katalogu głównym projektu musisz utworzyć dwa pliki z tymi samymi zmiennymi env, ale z różnymi wartościami:

.env.development
.env.production

Następnie wyklucz je z publicznego. W tym celu w swoim .gitignorepliku dodaj dwie linie:

.env.development
.env.production

Jest to więc właściwy sposób na użycie różnych zmiennych env dla dev i prod.

— Nastro
źródło

spróbuj użyć pełnej ścieżki, na przykład: ./node_modules/.bin/env-cmd

— Nastro

ale nie polecam takiego podejścia w mojej odpowiedzi. Teraz wiem, że reakcja daje wbudowaną mechanikę do pracy z .env

— Nastro

6

Miałem ten sam problem, ale to dlatego, że miałem plik .env w formacie YAML zamiast JS.

To było

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

ale musiało być

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

— cchapman
źródło

Takie proste, ale dobre miejsce. Zrobiłem to samo i nie widziałem drewna na drzewa. Dzięki

— Andy Allison

Dzięki za to! Szukałem cały dzień nie zauważając tego drobnego błędu :)

— chia yongkang

3

Jeśli .envplik działa, ale .env.developmentlub .env.productionnie, utwórz pusty .envplik obok tych dwóch. Nie wiem dlaczego, ale to działa dla mnie.

— Stjepan Golemac
źródło

0

I pamiętaj, aby nie wstawiać średnika po kluczu API w pliku env.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

Powinien być

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

to był mój błąd

— Wilk morski
źródło

-3

W przypadku najnowszych skryptów reagowania (3.2.0) jest to tak proste, jak powiedzenie

PORT=4000
BROWSER=none

w pliku .env lub .env.development (..etc), który powinien znajdować się w folderze głównym.

NIE będzie działać z prefiksem REACT_APP (wydaje mi się, że dokumenty są nieaktualne) i NIE wymaga żadnych dodatkowych pakietów npm (react-scripts zawiera już dotenv 6.2.0)

— Christos Tatitzikidis
źródło

4

To nieprawda. github.com/facebook/create-react-app/blob/…

— Gudgip