React JS - чтение конфигураций среды из файла внешних свойств - PullRequest
Новая
       16

React JS - чтение конфигураций среды из файла внешних свойств

2 голосов
/ 11 ноября 2019

Проблема : Я новичок в React JS и ищу опцию для чтения настроек среды из файла внешних свойств. Эта проблема более специфична для одного из моих клиентов, который ищет возможность динамического изменения файлов среды. Например, изменяйте hostname/port динамически при каждом изменении. Процесс сборки не принадлежит моему клиенту. Я создаю минимизированный окончательный пакет, который мой клиент развертывает на tomcat/web server.

Пробное решение : С некоторыми считываниями я настроил файлы .env для различных сред и смог успешночитайте конфиги из этих файлов. Однако это скорее файлы среды процесса сборки. И я пытаюсь найти способ прочитать конфиги из внешнего источника после создания моего пакета.

Возможные решения : Вот один из возможных подходов, который я могу придумать-

Чтение внешнего файла свойств с использованием библиотек, таких как «properties-reader». Я предоставлю файл свойств как часть моего комплекта выпуска (то есть папку сборки). Мой клиент может изменить этот файл свойств при необходимости.

Пожалуйста, предложите, если это правильный подход или есть лучшее решение этой проблемы?

Ответы [ 2 ]

1 голос
/ 13 ноября 2019

Решение, которое сработало для меня !!

1) Создайте файл "config.js" внутри публичной папки реагирующего проекта. Пример содержимого файла «config.js» - 

window.env = {
  API_DOMAIN_ADDR: "http://localhost:8080"
};

2) Обратитесь к файлу «config.js» внутри index.html. Код для index.html будет - 

<body>
    <div id="root"></div>
    <script src="%PUBLIC_URL%/config.js"></script>
  </body>

3) Теперь содержимое файла config.js будет доступно для реагирующего кода. Пример кода для получения значения переменных config.js - 

window.env.API_DOMAIN_ADDR

Добавьте этот код везде, где необходимо получить доступ к значению переменной. Я добавил это в свой класс обслуживания, который делает вызов ajax.

0 голосов
/ 11 ноября 2019

Я бы предложил использовать что-то вроде Firebase Realtime DB . У меня было аналогичное требование для указания сборок приложения на API-интерфейсы производственного сервера или сервера разработки для моей компании. Для этого мы используем для загрузки Firebase Config и оттуда пользовательский интерфейс, используемый для выбора конечной точки хост-сервера.

Преимущества:

  • Это избавляет вас от развертывания папки сборки каждый развремя.
  • Это в режиме реального времени и менее подвержены ошибкам.
  • FirebaseDB бесплатно для мелочей вроде этого.

Второй вариант - создать два файла средычто я вижу, вы уже сделали.

...