Как правильно формировать на фронтенде api url?

Question

[cester]

Добрый день! Интересно мнение опытных людей.
Как на фронтенде правильнее задавать api url , относительно домена или задавать в packege.json переменную и далее относительно нее в коде формировать api url ?
Например, два варианта:
1. В коде

const getApiUrl = () => {
      if (document.domain === 'staging.com') {
        return 'http://staging-api.com';
      } else if (document.domain === 'prod.com') {
        return 'http://prod-api.com';
      }
      return 'http://dev-api.com';
    };

2. В package.json

"buid:staging" "cross-env --env.API_VARIABLE=staging",
....

Далее в коде

const apiUrl = {
staging: 'http://staging-api.com',
prod: '...'
dev: '...'
}

Буду благодарен за какую-нибудь статью на эту тему или веские аргументы, дискуссия с бэкендером)

Comments

[Kovalsky]

Вообще подход Angular CLI чуть удобней: в файле %PROFILE_NAME%.cfg вы описываете все используемые в данном профиле переменные, типа там адреса API например, а потом при сборке указываете имя профиля, после чего файл конфига заменяется тем который соответствует выбранному профилю,

"Как на фронтенде правильнее задавать api url , относительно домена или задавать в packege.json переменную и далее относительно нее в коде формировать api url" - это скорее зависит от конкретных нужд и требований, а не от абстрактной правильности

Answer 1

[Alex]

"buid:staging" "cross-env --env.API_ENDPOINT=https://staging-api.com",

Далее в коде

// apiClient.js
function apiCall(method) {
    return fetch(API_ENDPOINT + method)
}

// main.js
apiCall('/some/api/method')

Comments

[cester]

Интересуют именно плюсы и минусы обоих вариантов

[Alex]

cester, И то и то — херня

[Михаил]

cester, потому что это переменные окружения