Как вы меняете localhost на имя сервера в React приложении?

Question

[Вадим]

Есть такие участки кода в приложении React, где прописан localhost, например

export const getData = () => {
  return fetch("http://localhost:3000/data.json", {
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .catch((error) => {
      throw error;
    });
};

Когда делаешь yarn build, этот localhost:3000 компилится и попадает в папку ./build и, естественно, не работает правильно на сервере, напр mysupersite.ru.

Как можно сделать автоматизировать build, чтобы он был готов для продакшена? Хотя бы, чтобы localhost заменился на нужное имя сервера? Неужели только скриптами или есть методы самого React или лучшие практики?

Comments

[Михаил]

все это через env прописывают

Answer 1

[Дмитрий Шицков]

Можно указывать относительный путь без hostname
Можно получать текущий адрес сервера из window.location
Можно подставлять на этапе сборки приложения через environment переменные в webpack или react.

Comments

[Вадим]

можно об этих переменных подробнее - где их можно прописать и как заставить webpack их использовать правильно - чтобы для yarn start работало localhost:3000, а для yarn build mysupersite.ru?

и что тогда писать вместо localhost:3000 - env variable?
export const getData = () => {
return fetch("localhost:3000/data.json", {
headers: {

с уважением,
Вадим

Answer 2

[Denis Masson]

Если вы используете CRA то просто создайте в папке проекта эти файлы
.env.production
.env.development
И в них заносите переменные Вашего окружение зависимости от билда

Иначе же используйте dotenv

Comments

[Вадим]

значит в .env.production заносим значение переменной для production
а в .env.development для development - причем та же переменная в 2-х файлах с разными значениями?

а затем обращаться к ним в JS коде например так, да?

export const getData = () => {
return fetch(process.env.REACT_APP_RUNNING_HOST, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},

[Denis Masson]

Вадим, Именно, ниже скрин приоритета загрузки переменных в зависимости от параметра запуска.