Import env-variable reagieren front-end

Habe ich installiert eine app mit create-react-app. Ich habe ein token, dass ich nicht wollen, um push zu GitHub.

Muss ich ran yarn add dontenv und dann versucht zu importieren in der env-variable, um meine App.js Datei.

Mein code sieht wie folgt aus

.env

TOKEN=**************

Dann meine app.js - Datei sieht wie folgt aus:

app.js

import React from 'react';
import ReactDOM from 'react-dom';
require('dotenv').config();

const App = props => {
    console.log(process.env.token);
    return <p>Test</p>
}

process.env.token ist undefined. Kann mir jemand raten wie zu verwenden vernarrt in das vordere Ende oder wie darf ich dies mithilfe einer Bootstrap erstellen-reagieren-app?

InformationsquelleAutor peter flanagan | 2018-03-05
  1. 30

    Brauchen Sie nicht dotenv (und ich bezweifle, dass die Bibliothek arbeiten, die zur Laufzeit in eine client-seitige Anwendung-sowieso).

    create-reagieren-app eigentlich bietet diese Funktionalität out of the box, vorausgesetzt, Sie sind mit [email protected] oder höher.

    Die Schritte sind wie folgt:

    • Erstellen Sie eine .env - Datei im Stammverzeichnis Ihres Projekts.
    • Eine variable hinzuzufügen, beginnend mit dem Präfix REACT_APP_.
    • Zugriff über process.env.

    Der zweite Teil ist der wichtige Teil -, Sie zu vermeiden, Verfügbarmachen von Variablen, die durch Unfall, create-react-app zwingt Sie, verwenden Sie ein Präfix als eine Art zu sagen "ja, ich weiß, was ich Tue".

    Wenn Sie nicht beabsichtigen, schieben Sie die Datei auf Quellcodeverwaltung (was Sie nicht sein sollte, wenn es genug geheime Schlüssel in!), dann mit einem .env.local Datei ist mehr idiomatische - das erfordert [email protected] oder höher.

    • Hinweis: Sie müssen den server neu starten, nachdem Sie diese Korrekturen
    InformationsquelleAutor Joe Clay
  2. 0

    dotenv ist für die Verwendung mit Knoten nur, nicht reagieren.

    Einen Weg, dies zu behandeln client-Seite, wenn Sie nicht über ein backend angeschlossen ist, überprüfen Sie Ihre host-name:

    if(hostname === 'realsite.com') {
  token = 'foo';
} else if(hostname === 'staging.realsite.com') {
  token = 'bar';
} else {
  token = 'baz';
}

    Ansonsten, wenn du das backend haben, setzen Sie die variable in Ihrem .env - Datei und übergeben Sie es von dem hinteren Ende zu dem vorderen Ende. Es gibt mehrere Möglichkeiten zu gehen über, je nachdem, wie Ihre Anwendung eingerichtet.

    InformationsquelleAutor Stretch0
  3. 0

    Du musst Sie nicht verwenden, jede code-Logik für diesen Zweck. Sie müssen verwenden unterschiedliche .env-Dateien für die Produktion und die Entwicklung, wenn Sie wollen serv Werte für unterschiedliche Umgebungen. Siehe meine Antwort hier

    InformationsquelleAutor Nastro
Schreibe einen Kommentar