React – zmienne środowiskowe w plikach .env

W dzisiejszym artykule przedstawię, w jaki sposób możemy skorzystać ze zmiennych środowiskowych w aplikacji React.

Plik .env

Zacznijmy od utworzenia czystej aplikacji za pomocą create-react-app. Następnie uruchamiamy aplikację.

Teraz w głównym folderze aplikacji tworzymy plik .env. W tym pliku będziemy przechowywać zmienne. Dla naszego przykładu, stworzymy jedną zmienną, której wartość będziemy chcieli wyświelić.

REACT_APP_TEST_KEY="value from test key"

Uwaga!
Zmienne definiowane w ten sposób powinny zaczynać się od prefixu REACT_APP_…

Teraz spróbujemy pobrać zawartość w komponencie… Nowo dodany klucz powinien być widoczny w process.env. Wyświetlimy zatem zawartość obiektu w konsoli.

function App() {
    console.log(process.env)

    return (
        <div>test</div>
    );
}

Przyjrzyjmy się zawartości konsoli:

FAST_REFRESH: true
NODE_ENV: "development"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object

Nasza wartość nie jest widoczna. Dzieje się tak dlatego, że jest ona dodawana podczas budowania aplikacji. Aby zobaczyć nowo dodaną wartość, wyłączmy i włączmy ponownie aplikację.

Teraz w konsoli powinna ukazać się nam wartość:

REACT_APP_TEST_KEY: "value from test key"

Polecam również sprawdzić zdefiniowanie tej wartości bez REACT_APP_ jako prefix… 🙂 Wtedy rzeczywiście tracimy dostęp do zmiennej.

Pamiętajmy, aby przy każdej zmianie wartości na nowo uruchomić aplikację, aby zmiany były widoczne, nawet jeżeli zmieniamy wartość, a nie dodajemy/usuwamy zmienną.

Warto tutaj przypomnieć, że w bardziej elegancki sposób możemy odwołać się do tej wartości, używając destrukturyzacji.

const { REACT_APP_TEST_KEY } = process.env;

UWAGA!
Wartości, które dodaliśmy w ten sposób będą osadzone w buildowanej aplikacji, zatem będą widoczne bezpośrednio w pliku .js. Warto po stworzeniu zmiennych zrobić build aplikacji i wyszukać frazę naszego klucza w plikach. W związku z tym nie przechowujemy w tym miejscu żadnych wrażliwych danych typu hasła!

Kilka plików .env

Czasami pojawiają się sytuacje, że chcemy stworzyć inne zmienne dla aplikacji produkcyjnych, a inne dla aplikacji w stanie deweloperskim. Może to być np. inny adres URL do naszego API itd.

W tej sytuacji wystarczy stworzyć pliki o nazwie .env.development oraz .env.production. Obsługę zapewni nam react-scripts (https://www.npmjs.com/package/react-scripts), które dołączone jest do create-react-app (https://create-react-app.dev/).

Dodajmy zatem dwa wyżej wymienione pliki o różnych zawartościach, aby sprawdzić zachowanie i to, co zostanie zwrócone.

.env.development

REACT_APP_TEST_KEY="test key development mode"

.env.production

REACT_APP_TEST_KEY="test key PRODUCTION mode"

Po dodaniu dwóch plików, nie pozostało nic innego jak ponownie uruchomić aplikację. Z związku z tym, że działamy w trybie developerskim, co też widoczne jest w process.env
NODE_ENV: "development"
powinniśmy otrzymać wartość test key development mode.

W przypadku create-react-app dla polecenia:
npm start = NODE_ENV="development"
npm test = NODE_ENV="test"
npm build = NODE_ENV="production"

Bardzo łatwo można to sprawdzić. Wystarczy uruchomić polecenie npm build i uruchomić zbudowaną aplikację. W konsoli powinniśmy zobaczyć:

NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
FAST_REFRESH: true
REACT_APP_TEST_KEY: "test key PRODUCTION mode"

Zmienne z kilku plików

Załóżmy, że chcemy zdefiniować różne wartości, część z nich jest wspólna, zaś część różni się w zależności od trybu. Nic prostszego 🙂 Zmienne wspólne możemy zdefiniować w pliku .env, zmienne do środowiska w trybie development w pliku .env.development, a te do trybu „production” w pliku .env.production.

Przykład:

.env

REACT_APP_TEST_KEY="value from test key"
REACT_APP_ENV_VARIABLE="variable env"

.env.production

ACT_APP_TEST_KEY="test key PRODUCTION mode"

Dla naszego przykładu wynikiem, który zobaczymy w konsoli dla zbuildowanej aplikacji będzie:

NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
FAST_REFRESH: true
REACT_APP_TEST_KEY: "test key PRODUCTION mode"
REACT_APP_ENV_VARIABLE: "variable env"

Dzięki i do następnego artykułu już za miesiąc! 🙂

Źródła:
Obraz: https://unsplash.com/photos/PXB7yEM5LVs
Create React App: https://create-react-app.dev/