Внедрение переменных среды в приложение React при его обслуживании с сервером express

Question

Я разрабатываю приложение, которое имеет серверную часть и интерфейс как часть одного проекта, а серверная часть, помимо API, также обслуживает файлы stati c для интерфейса, выполняя следующие действия:

const frontendDir = appRoot.resolve("../frontend/build")
app.use(express.static(frontendDir))
app.get("*", (req, res) => res.sendFile(path.resolve(frontendDir, "index.html")))

Есть ли способ каким-то образом предварительно обработать эти файлы перед их отправкой для внедрения некоторых переменных среды, к которым у сервера есть доступ, а у клиента, очевидно, нет?

Я пытаюсь чтобы сделать некоторые переменные доступными, например SENTRY_DSN, HEROKU_RELEASE_VERSION, HEROKU_RELEASE_CREATED_AT, и т.д. c.

Answer 1

Я не знаю, что это поможет, но я думаю, что вы могли бы использовать шаблонизатор для передачи ваших данных во внешний интерфейс. Например, handlebars:

const Handlebars = require('handlebars')

Handlebars.registerHelper('prod', () => {
  return process.env.NODE_ENV === 'production';
})

в вашем html файл:

<div class="some-content">   
  {{#if prod}}
    <p>Seen only in production</p>
  {{/if}}
  
  <p>This is some example text</p>
</div>