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

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.

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

"properties-reader": "0.0.16"

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

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

Przeczytaj plik właściwości

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

Zaimportuj tę stałą jako config

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

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

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

Jeśli masz plik .properties lub .ini