Dodawanie pliku .env do projektu React

Próbuję ukryć mój klucz API, gdy zdecyduję się na github, i przejrzałem forum w poszukiwaniu wskazówek, szczególnie następujący post:

Jak ukryć klucz API w aplikacji create-react-app?

Wprowadziłem zmiany i ponownie uruchomiłem przędzę. Nie jestem pewien, co robię źle –– Dodałem .envplik do katalogu głównego projektu (nazwałem go process.env) i do pliku, który właśnie umieściłem REACT_APP_API_KEY = 'my-secret-api-key'.

Myślę, że może to być sposób, w jaki fetchdodaję klucz do mojego w App.js i próbowałem wielu formatów, w tym bez użycia literału szablonu, ale mój projekt nadal się nie kompiluje.

Każda pomoc jest bardzo ceniona.

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

4 kroki

1. npm install dotenv --save

2. Następnie dodaj następujący wiersz do swojej aplikacji.

   require('dotenv').config()

3. Następnie utwórz .envplik w katalogu głównym aplikacji i dodaj do niego zmienne.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. Na koniec dodaj .envdo swojego.gitignore pliku, aby Git go zignorował i nigdy nie trafiał na GitHub.

Jeśli używasz aplikacji create-react-app , potrzebujesz tylko kroku 3 i 4, ale pamiętaj, że zmienna musi zacząć się od zmiennej REACT_APP_, aby działała.

Odniesienie: https://create-react-app.dev/docs/adding-custom-environment-variables/

UWAGA - Konieczność ponownego uruchomienia aplikacji po dodaniu zmiennej w pliku .env.

Źródła - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Jestem więc nowy w React i znalazłem sposób, aby to zrobić.

To rozwiązanie nie wymaga żadnych dodatkowych pakietów.

Krok 1 ReactDocs

W powyższych dokumentach wspominają o eksporcie w Shell i innych opcjach, ta, którą spróbuję wyjaśnić, to użycie pliku .env

1.1 Utwórz plik Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Ważne uwagi MUSI zaczynać się od REACT_APP_

1.2 Dostęp do zmiennej ENV

#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>

handleFetchData() { // access in API call
  fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
    .then((res) => res.json())
    .then((data) => console.log(data))
}

1.3 Problem dotyczący budowania koperty

Więc po wykonaniu kroku 1.1 | 2 nie działało, wtedy znalazłem powyższy problem / rozwiązanie. React read / create env, gdy jest skompilowany, więc musisz uruchomić npm start za każdym razem, gdy modyfikujesz plik .env, aby zmienne zostały zaktualizowane.

Dziś jest na to prostszy sposób.

Po prostu utwórz plik .env.local w swoim katalogu głównym i ustaw tam zmienne. W Twoim przypadku:

REACT_APP_API_KEY = 'my-secret-api-key'

Następnie nazywasz go swoim plikiem js w ten sposób:

process.env.REACT_APP_API_KEY

React obsługuje zmienne środowiskowe od czasów act-scripts@0.5.0. Nie potrzebujesz do tego zewnętrznego pakietu.

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env

* uwaga: proponuję .env.local zamiast .env, ponieważ create -ago-app dodaje ten plik do gitignore podczas tworzenia projektu.

Priorytet plików:

npm start: .env.development.local, .env.development, .env.local, .env

npm run build: .env.production.local, .env.production, .env.local, .env

npm test: .env.test.local, .env.test, .env (brak pliku .env.local)

Więcej informacji: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Użytkownicy pakietu Webpack

Jeśli używasz webpacka, możesz zainstalować i używać dotenv-webpackwtyczki, aby to zrobić, wykonaj poniższe czynności:

Zainstaluj pakiet

yarn add dotenv-webpack

Utwórz .envplik

// .env
API_KEY='my secret api key'

Dodaj do webpack.config.jspliku

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

Użyj go w swoim kodzie jako

process.env.API_KEY

Aby uzyskać więcej informacji i informacji o konfiguracji, odwiedź tutaj

1. Utwórz plik .env plik w folderze głównym

niektóre źródła preferują użycie .env.developmenti.env.production ale nie jest to obowiązkowe.

2. Nazwa Twojej VARIABLE -mus- zaczynać się od REACT_APP_YOURVARIABLENAME

wydaje się, że jeśli twoja zmienna środowiskowa nie zaczyna się w ten sposób, będziesz miał problemy

3. Dołącz swoją zmienną

aby dołączyć zmienną środowiskową, wystarczy umieścić w kodzie process.env.REACT_APP_VARIABLE

Nie musisz instalować żadnych zewnętrznych zależności

Musisz zainstalować npm install env-cmd

Utwórz .env w katalogu głównym i zaktualizuj w ten sposób & REACT_APP_ jest obowiązkowym przedrostkiem dla nazwy zmiennej.

REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"

Zaktualizuj plik package.json

  "scripts": {
    "start": "env-cmd react-scripts start",
    "build": "env-cmd react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

1. Zainstaluj dotenvjako devDependencies:

npm i --save-dev dotenv

2. Utwórz .envplik w katalogu głównym:

my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md

3. Zaktualizuj .envplik jak poniżej & REACT_APP_ jest obowiązkowym prefiksem dla nazwy zmiennej.

REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY

4. [ Opcjonalne, ale dobra praktyka ] Teraz możesz utworzyć plik konfiguracyjny do przechowywania zmiennych i wyeksportować zmienną, aby móc jej używać z innych plików.

Na przykład utworzyłem plik o nazwie base.jsi zaktualizowałem go jak poniżej:

export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;

5. Lub możesz po prostu wywołać zmienną środowiskową w pliku JS w następujący sposób:

process.env.REACT_APP_BASE_URL

Jeśli otrzymujesz wartości jako undefined, powinieneś rozważyć ponowne uruchomienie serwera węzłów i ponowną kompilację.