Hinzufügen einer .env-Datei zu React Project

Ich versuche, meinen API-Schlüssel zu verbergen, wenn ich mich zu Github verpflichte, und habe das Forum nach Anleitungen durchsucht, insbesondere den folgenden Beitrag:

Wie verstecke ich den API-Schlüssel in der Create-React-App?

Ich habe die Änderungen vorgenommen und das Garn neu gestartet. Ich bin mir nicht sicher, was ich falsch mache - Ich habe eine .envDatei zum Stammverzeichnis meines Projekts hinzugefügt (ich habe sie benannt process.env) und in die Datei, die ich gerade eingefügt habe REACT_APP_API_KEY = 'my-secret-api-key'.

Ich denke, es ist möglicherweise die Art und Weise, wie ich den Schlüssel zu meiner fetchin App.js hinzufüge, und ich habe mehrere Formate ausprobiert, auch ohne das Vorlagenliteral zu verwenden, aber mein Projekt wird immer noch nicht kompiliert.

Jede Hilfe wird sehr geschätzt.

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 Schritte

1. npm install dotenv --save

2. Fügen Sie als Nächstes die folgende Zeile zu Ihrer App hinzu.

   require('dotenv').config()

3. Erstellen Sie dann eine .envDatei im Stammverzeichnis Ihrer Anwendung und fügen Sie die Variablen hinzu.

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

4. Fügen Sie .envschließlich Ihre .gitignoreDatei hinzu, damit Git sie ignoriert und sie niemals auf GitHub landet.

Wenn Sie die Create-React-App verwenden , benötigen Sie nur die Schritte 3 und 4. Beachten Sie jedoch, dass die Variablen zunächst beginnen müssen, REACT_APP_damit sie funktionieren.

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

HINWEIS - Nach dem Hinzufügen einer Variablen in der ENV-Datei muss die Anwendung neu gestartet werden.

Referenz - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Also bin ich selbst neu in React und habe einen Weg gefunden, dies zu tun.

Diese Lösung erfordert keine zusätzlichen Pakete.

Schritt 1 ReactDocs

In den obigen Dokumenten wird der Export in Shell und andere Optionen erwähnt. Ich werde versuchen, die Verwendung der ENV- Datei zu erläutern

1.1 Erstellen Sie Root / .env

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Wichtige Hinweise Es muss mit REACT_APP_ beginnen

1.2 Zugriff auf die ENV-Variable

#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 Build - Env Ausgabe

Nachdem ich Schritt 1.1 | 2 ausgeführt hatte, funktionierte es nicht und fand das obige Problem / die obige Lösung. Reagieren Sie read / create env, wenn es erstellt wird, sodass Sie jedes Mal, wenn Sie die .env-Datei ändern , npm run start ausführen müssen, damit die Variablen aktualisiert werden.

Heute gibt es einen einfacheren Weg, dies zu tun.

Erstellen Sie einfach die Datei .env.local in Ihrem Stammverzeichnis und legen Sie dort die Variablen fest. In deinem Fall:

REACT_APP_API_KEY = 'my-secret-api-key'

Dann rufen Sie es in Ihrer js-Datei folgendermaßen auf:

process.env.REACT_APP_API_KEY

React unterstützt Umgebungsvariablen, da [email protected]. Dazu benötigen Sie kein externes Paket.

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

* Hinweis: Ich schlage .env.local anstelle von .env vor, da create-react-app diese Datei beim Erstellen des Projekts zu gitignore hinzufügt.

Dateipriorität:

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 (Hinweis .env.local fehlt)

Weitere Informationen: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Webpack-Benutzer

Wenn Sie ein Webpack verwenden, können Sie das dotenv-webpackPlugin installieren und verwenden. Führen Sie dazu die folgenden Schritte aus:

Installieren Sie das Paket

yarn add dotenv-webpack

Erstellen Sie eine .envDatei

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

Fügen Sie es der webpack.config.jsDatei hinzu

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

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

Verwenden Sie es in Ihrem Code als

process.env.API_KEY

Weitere Informationen und Konfigurationsinformationen finden Sie hier

1. Erstellen Sie die ENV- Datei in Ihrem Stammordner

einige Quellen prefere zu verwenden .env.developmentund , .env.productionaber das ist nicht obligatorisch.

2. Der Name Ihrer VARIABLE -must- muss mit REACT_APP_YOURVARIABLENAME beginnen

Es scheint, dass Sie Probleme haben werden, wenn Ihre Umgebungsvariable nicht so startet

3. Fügen Sie Ihre Variable hinzu

Um Ihre Umgebungsvariable einzuschließen, geben Sie einfach Ihren Code ein process.env.REACT_APP_VARIABLE

Sie müssen keine externe Abhängigkeit installieren

Sie müssen npm install env-cmd installieren

Machen Sie .env im Stammverzeichnis und aktualisieren Sie es wie folgt. & REACT_APP_ ist das obligatorische Präfix für den Variablennamen.

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

Aktualisieren Sie package.json

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

1. Installieren Sie dotenvals devDependencies:

npm i --save-dev dotenv

2. Erstellen Sie eine .envDatei im Stammverzeichnis:

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

3. Aktualisieren Sie die .envDatei wie folgt & REACT_APP_ ist das obligatorische Präfix für den Variablennamen.

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

4. [ Optional, aber bewährte Methode ] Jetzt können Sie eine Konfigurationsdatei zum Speichern der Variablen erstellen und die Variable exportieren, um sie aus anderen Dateien zu verwenden.

Zum Beispiel habe ich eine Datei mit dem Namen erstellt base.jsund wie folgt aktualisiert:

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

5. Oder Sie können die Umgebungsvariable in Ihrer JS-Datei einfach folgendermaßen aufrufen:

process.env.REACT_APP_BASE_URL

Wenn Sie die Werte als erhalten undefined, sollten Sie den Knotenserver neu starten und erneut kompilieren.