Vite + React: Как создать файл конфигурации собранного приложения?

Question

[Vurundshundba]

Делаю небольшое веб-приложение для организации на React, в роли сборщика Vite. Работать будет в браузере.

Есть задача сделать в уже собранном проекте возможность задавать конфигурацию. Что-то типа файла settings.js в корне проекта, в котором прописаны какие-то пути или настройки. Это нужно, например, чтобы отдать собранный проект админу организации, а он, в зависимости от локальных настроек, заполнил конфигурационный файл необходимыми данными. Или, чтобы можно было, не меняя исходники, отдать проект в другую организацию с той же структурой, и там человек вёл бы уже свои данные... Что-то вроде:

// файл settings.js
export const settings = {
  backendUrl: 'http://192.168.0.1/backend.php',
  socketUrl: '192.168.0.1:3000',
};

// Где-то внутри проекта за рамками settings.js
import { settings } from './settings.js';
/*
Манипуляции с данными...
*/

Соответственно, проект должен брать настройки из этого файла и использовать их динамически. (То есть, меняется конфиг - меняется поведение проекта).
Можно ли что-то подобное сделать на Vite + React?

Answer 1

[Алексей Ярков]

Да всё же элементарно. Просто подключайте ваш settings.js перед скриптом приложения и берите ваши настройки из глобальной переменной. А в settings.js примерно это:

window.APP_SETTINGS = {
  API_URL: "https://api.example.com",
};

Comments

[Vurundshundba]

А в проекте как эти данные использовать? Там же нет никакого window...
Есть globalThis, попробовал с ним, но всё равно не получилось...

[Алексей Ярков]

Vurundshundba,

А в проекте как эти данные использовать?

В каком проекте? В браузере не может не быть window.

[Vurundshundba]

Алексей Ярков, Ну смотрите, у меня есть проект на React. Он собирается с помощью Vite. В самих исходниках надо использовать данные из настроек (тот самый файл settings.js). Если делать экспорт данных в settings.js, а в проекте делать импорт, то эти данные "зашиваются" в итоговую сборку. И даже если настроить Vite на сборку конкретного файла отдельно, то данные оттуда браться не будут (пробовал). А для реализации задуманного надо чтоб данные всегда брались из отдельного файла, даже когда проект собран. Либо как-то настроить Vite таким образом, чтобы он делал отдельный "чанк" файла с настройками, но при этом брал данные именно оттуда...

[Алексей Ярков]

Vurundshundba, что вы там нафантазировали? Просто положите ваш settings.js в папку public, ну или где у вас там статика, а в index.html в секции head подключите его. Меняйте там данные и читайте в приложении из глобальной переменной. Всё.

[Vurundshundba]

Алексей Ярков, действительно, сработало. Спасибо! Правда, всё равно этот способ слегка "костыльным" кажется...

[Алексей Ярков]

Vurundshundba,

слегка "костыльным" кажется

Это потому что вы начитались советов про то, что глобальные переменные зло )) Просто надо использовать то что уместно в сложившейся ситуации.

[Vurundshundba]

Алексей Ярков,

начитались советов про то, что глобальные переменные зло ))

Абсолютно верно)) Так и учили...

Answer 2

[bit8]

С помощью node.js прочитываешь файл при запуске, передаешь их в проект.

Не совсем понятно, ты собираешь просто сервер или программу на electron.js пример. Но суть все равно не меняется с помощью node.js читаешь файл и передаешь данные.

Comments

[Vurundshundba]

bit8 Собираю обычный фронтенд на реакте. Работать будет в браузере.
Файл читать чем-то типа readFileSync? Он же в браузере недоступен будет...
Можно пример в виде кода?