How to use env.js to avoid hardcoding variables in UI app extensions?

[Harold7665]

Hello,

• I have a custom UI with a widget communicating with the server having @session.endpoint.
• I am using a development URL at the moment, http://localhost:40750/atoti/pyapi/<my_endpoint>.
• I would like to use something like ${protocol}://${host}:${port}/atoti/pyapi/<my_endpoint> with protocol, host and port being defined on a separated file (instead of having a hard-coded URL in the code).
• In my (BD) case, this is in order to use a generic extension for all our demos, PoVs and PoCs ; in a production case, it may be having development server variables and production server variables.

Does it make sense? If yes, is there any way to do this?

Thanks.

[tibdex]

Hi, you don't need an env.js file to do this. You could instead instead make your URL dynamic with something like this:

const url = `${window.location.origin}/atoti/pyapi/${enpointPath}`;

Since you want to fetch an endpoint on an ActivePivot server it would be even cleaner to do this in a React component:

const defaultServerKey = "default";
const client = useActivePivotClient(defaultServerKey);
const url = `${client.url}/atoti/pyapi/${enpointPath}`;

since that would decouple your URL definition from the fact that the UI and your endpoint are currently served from the same origin.
However, it's not possible today because Client.url is protected.

[Harold7665]

This is clear @tibdex, thank you! I will start with the first solution then, and ask for the second on another ticket.