Jak przechowywać plik konfiguracyjny i czytać go za pomocą React

110

Jestem nowy na respons.js Zaimplementowałem jeden komponent, w którym pobieram dane z serwera i używam ich jak,

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

Chcę przechowywać adres URL w pliku konfiguracyjnym, więc kiedy wdrożyłem to na serwerze testowym lub na produkcji, muszę po prostu zmienić adres URL w pliku konfiguracyjnym, a nie w pliku js, ale nie wiem, jak używać pliku konfiguracyjnego wreak.js

Czy ktoś może mi pomóc, jak mogę to osiągnąć?

Dhaval Patel
źródło
1
Czy używasz webpacka lub jakiegoś narzędzia do kompilacji kodu js?
Petr Bela
Powszechne byłoby wysyłanie tej wartości, ustawianie i odczytywanie ze zmiennej środowiskowej na stronę internetową jako globalna wartość dostępna w Twoim JavaScript. Następnie użyj go do pobrania danych.
WiredPrairie
1
@PetrBela: tak, używam webpacka do budowania bundle.js, ale zajmuję się plikiem konfiguracyjnym takim jak web.config w .net
Dhaval Patel

Odpowiedzi:

129

Dzięki pakietowi webpack możesz umieścić w externalspolu konfigurację specyficzną dla środowiskawebpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Jeśli chcesz przechowywać konfiguracje w oddzielnym pliku JSON, to też jest możliwe, możesz wymagać tego pliku i przypisać do Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

Następnie w swoich modułach możesz użyć config:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

Do reakcji:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Nie jestem pewien, czy obejmuje to Twój przypadek użycia, ale dla nas działa całkiem nieźle.

Petr Bela
źródło
2
Nie ma za co. BTW, od tamtej pory nauczyliśmy się, że lepiej jest używać JSON, aby uniknąć błędów składniowych. Odpowiednio zaktualizowałem kod.
Petr Bela
2
Hmm, nie zdawałem sobie sprawy, że wymaga przeanalizowania pliku JSON. Ponieważ externalsoczekuje, że kod zostanie oceniony, musisz określić ciąg znaków JSON.
Petr Bela
21
to nie działa dla mnie, pojawia się ten błąd: [Błąd: Nie można znaleźć modułu 'Config'] podczas korzystania z require ('Config')
amgohan
4
Co się stanie, jeśli chcę, aby pakiet WebPack nie zawierał oddzielnego pliku konfiguracyjnego w pliku output.bundle.js? Jeśli byłby to osobny pakiet, czy nadal mogę wymagać („Konfiguracja”)? Dzięki
Barny
3
Jak ktokolwiek z was sprawił, że to zadziałało? Robię to dokładnie zgodnie z sugestią i otrzymuję komunikat „Nie można znaleźć modułu„ Konfiguracja ””, tak samo jak @amgohan.
ceebreenk
77

Jeśli korzystałeś z aplikacji Create React, możesz ustawić zmienną środowiskową za pomocą pliku .env. Dokumentacja jest tutaj:

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

Zasadniczo zrób coś takiego w pliku .env w katalogu głównym projektu.

REACT_APP_NOT_SECRET_CODE=abcdef

Możesz uzyskać do niego dostęp ze swojego komponentu za pomocą

process.env.REACT_APP_NOT_SECRET_CODE
aris
źródło
26
pamiętaj tylko, że nazwa zmiennej musi zaczynać się odREACT_APP_
Tomasz Madeyski
Mam aplikację ASP.NET Core utworzoną za pomocą szablonu React i wszystko, co zrobiłem, to dodanie pustego pliku do folderu „ClientApp” i umieszczenie REACT_APP_MYSETTING=valuego w nim, a następnie odwołanie się do niego tak, jak process.env.REACT_APP_MYSETTINGw moim kodzie JSX i zadziałało. Dzięki!
Neo
.env w ogóle nie działa dla mnie w projekcie aplikacji do tworzenia reakcji
user8620575
3
Będziesz musiał zrestartować projekt na npm po dodaniu .env do katalogu głównego
foyss
Wydaje się, że to anty-wzór. Punkty końcowe API nie są sekretami, które powinny być zdefiniowane w zmiennej środowiskowej. Stanowią część definicji aplikacji.
Rob
2

Możesz używać pakietu dotenv bez względu na to, jakiej konfiguracji używasz. Pozwala utworzyć plik .env w katalogu głównym projektu i określić klucze w ten sposób

REACT_APP_SERVER_PORT=8000

W pliku wejściowym aplikacji po prostu wywołaj dotenv (); przed uzyskaniem dostępu do kluczy w ten sposób

process.env.REACT_APP_SERVER_PORT
Joshua Underwood
źródło
1
chociaż myślę, że musisz określić klucze zaczynające się odREACT_APP_
HenryM
1

Jeśli masz plik .properties lub .ini

Właściwie w przypadku, gdy masz plik, który ma pary klucz-wartość, takie jak ta:

someKey=someValue
someOtherKey=someOtherValue

Możesz zaimportować to do pakietu webpack za pomocą modułu npm o nazwie properties-reader

Uznałem to za bardzo pomocne, ponieważ integruję reaguję z frameworkiem Java Spring, w którym jest już plik application.properties. To pomaga mi trzymać całą konfigurację w jednym miejscu.

  1. Zaimportuj to z sekcji zależności w pliku package.json

"properties-reader": "0.0.16"

  1. Zaimportuj ten moduł do pliku webpack.config.js na górze

const PropertiesReader = require('properties-reader');

  1. Przeczytaj plik właściwości

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

  1. Zaimportuj tę stałą jako config

externals: { 'Config': JSON.stringify(appProperties) }

  1. Użyj go w taki sam sposób, jak wspomniano w zaakceptowanej odpowiedzi

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')

Fangming
źródło
3
Twój krok 2 dotyczący webpack.config.js, jeśli używasz aplikacji create-react-app, to nie ma konfiguracji webpack (lub jest ona ukryta). Jak postępować w takim przypadku?
joedotnot