it-swarm.com.de

Hinzufügen einer .env-Datei zu React Project

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

Wie kann ich den API-Schlüssel in der create -react-app ausblenden?

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

Ich denke, auf diese Weise füge ich den Schlüssel meiner fetch in App.js hinzu. Ich habe mehrere Formate ausprobiert, auch ohne das Literal der Vorlage, 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);
     });
}

13
Bianca M

4 Schritte

1) npm install dotenv --save

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

require('dotenv').config()

3) Erstellen Sie anschließend eine .env - Datei 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 schließlich .env Zu Ihrer .gitignore - Datei hinzu, damit Git sie ignoriert und sie niemals auf GitHub landet.

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

31
tarzen chugh

Also bin ich neu bei React und habe einen Weg gefunden, es zu tun.

Diese Lösung benötigt nicht erforderlich zusätzliche Pakete.

Schritt 1 ReactDocs

In den oben genannten Dokumenten erwähnen sie den Export in Shell und andere Optionen, die ich hier erklären möchte, ist die Verwendung von .env -Datei

1.1 root/.env erstellen

#.env file
REACT_APP_SECRET_NAME=secretvaluehere123

Wichtige Hinweise it MUSS beginnen mit REACT_APP_

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 also Schritt 1.1 | 2 ausgeführt hatte, funktionierte es nicht mehr, dann fand ich das obige Problem/die obige Lösung. Reagieren Sie auf das Lesen/Erstellen von env, wenn es erstellt wurde, sodass Sie jedes Mal, wenn Sie die .env-Datei ändern, Startup-Start müssen, damit die Variablen aktualisiert werden.

2
T04435

Webpack-Benutzer

Wenn Sie Webpack verwenden, können Sie dotenv-webpack plugin installieren und verwenden. Gehen Sie dazu wie folgt vor:

Installieren Sie das Paket

yarn add dotenv-webpack

Erstellen Sie eine .env-Datei

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

Fügen Sie es zur webpack.config.js-Datei 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 unter hier

2
Aminu Kano

Heute gibt es einen einfacheren Weg, dies zu tun.

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

REACT_APP_API_KEY = 'my-secret-api-key'

Dann nennen Sie es in Ihrer js-Datei auf diese Weise:

process.env.REACT_APP_API_KEY

React unterstützt Umgebungsvariablen seit [email protected] Sie benötigen dazu kein externes Paket.

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

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

Dateien Prioritä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

1
Pablo