create respond app nie odbiera plików .env?

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

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

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

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

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 

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 .

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.

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'

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.

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

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)