How to make api urls configurable for multiple customers

Design
1

I am working on an app with more than 30 customers, different customer has different api urls.

I want to move all the api urls to a public json file, so that I can easily modify it for different customers, that will make the api urls more configurable. Those api urls used to be in ‘my-app/config/environment.js’, then after built, it will be in the content attr of the ‘meta’, which is not configurable.

In order to make the api urls configurable, my current solution is like this:

I am using “ember-cli-inline-content” to define an inline content and put this to ‘my-app/app/index.html’, then in index.html, I have something like

<script const PUBLIC_API = {API1 : 'https://api1.com/', API2 : 'https://api2.com', API3 : 'https://api3.com', API4 : 'https://api4.com', API5: 'https://api5.com', ...}

I have also a ‘my-app/app/config/api-urls.js’ which has the following structure

const { API1 , API2 , API3 , API4 , API5 ,… } = PUBLIC_API;

export const API={ API1:API1, API1_BOOKING: API1+“/”+“booking”, … … }

In many other files have something like

import {API} from ‘my-app/config/api-urls’; import ApplicationAdapter from ‘./application’;

export default ApplicationAdapter.extend({ defaultSerializer: ‘booking-serializer’, host: API.API1_BOOKING, … });

Use global variable PUBLIC_API seems not a perfect solution.

What will be better solution for this purpose?