Environmental Variables for URL in API Data Source

[jay_savvi]

Hello,

I am currently trying to set up a dynamic URL using environmental variables in an API Data source.
I have set up an $_ENV variable named API_URL for my development target following the tutorial here and I am trying to access it for my API Data source using the Dynamic Attribute field. I’ve input '{{$_ENV.API_URL}}/packages?depth=0' in the Code field of the Dynamic Attribute for Url.

However, rather than performing the correct API call, the Request URL seems to be http://localhost:3000/'/packages?depth=0%27&. It works if I replace the environmental variable with a static value, so I’m guessing my approach to using the env variable is wrong. What am I missing?

[sid]

Hi.
{{$_ENV.API_URL}}/packages?depth=0 this code is correct, but what you actually have in your code could be incorrect, resulting in the weird URL. Try setting it again. Please share screenshot of your code, if it still does not work.

[jay_savvi]

Hello,
the code for the Data Source is <dmx-api-datasource id="api_packages_list" is="dmx-fetch" dmx-bind:url="'{{$_ENV.API_URL}}/packages?depth=0'"></dmx-api-datasource>.
If I remove the extra quotes, the URL looks better, but still not how it should be. The env variable is not inserted into the field. Here is a screenshot of the env variable:

And here of the Data Source URL field:

[sid]

Try this:
<dmx-api-datasource id="api_packages_list" is="dmx-fetch" dmx-bind:url="{{$_ENV.API_URL}}/packages?depth=0"></dmx-api-datasource>

[jay_savvi]

Thank you. Removing the quotes does make the resulting URL slightly more correct.
However, it results in http://localhost:3000/packages?depth=0& but it should be https://api.my-url.com/api/packages?depth=0. It doesn’t seem to use the environmental variable at all.

[sid]

How are you setting the Environment Variable?
The binding is working which is why the localhost:3000 would be showing in the code.
If you are seeing it as blank, then it means your ENV is not set correctly.

[jay_savvi]

You’re right; it seems it is the binding that’s incorrect, but I have no idea why it would set it to localhost:3000. As shown in the screenshots in my previous reply, I created the variable in the Globals tab and assigned the value in the Server Connect Settings.
I checked the files, and the variable is created in global.json file and is assigned the value https://api.my-url.com/api in the config.json. I have no idea where the localhost:3000 is coming from.

[bpj]

ENV variables are server based and you’re trying to set it client-side. You could either bind it using a server-side binding (if you have added a server side connection to your page - in the app node)

Alternatively, you could set a value to output (bound to the ENV) in a server connect API that you either already call on your page or add a new one

[sid]

Sorry… missed the screenshot.
I have no idea how that thing is supposed to work, or why it even exists.
@Teodor Could please explain how is this ENV supposed to work?

I see that you are using a local NodeJS environment. So you just need to create a .env file in the root of your project folder and set your ENV like:
API_URL=https://api.my-url.com

Then, restart the local NodeJS server using the botton in bottom bar in Wappler.

[bpj]

@jay_savvi

I have no idea where the localhost:3000 is coming from.

It is because {{$_ENV.API_URL}} is finding nothing for your dynamic URL (because it is only accessible on your server) so you end up with just /packages?depth=0 which is relative to the root. In your case localhost:3000

[bpj]

Step-by-step:
Create an API (Server Action)
Add a Set Value (and set to output)

Add a Server Connect component to your page linked to the API file you just made (I’m going to assume I gave it an ID of sc_apiurl
Bind it on your page as, including for your dynamic URL with: {{sc_apiurl.data.apiurl}}

[jay_savvi]

Thank you everyone for your help and the detailed explanations!
@bpj 's solution worked! Thank you again.

[pedroponte]

Thanks for your response.

Would the code look something like this or am I missing something?

TIA

[Apple]

To start, you’re missing the dynamic attribute dmx-bind:url, and then I suggest you re-build the expression using the UI instead of typing manually (because I’m not sure if envVars is the name of your server connect, otherwise you’re missing the server connect’s name before it)

[pedroponte]

@Apple

dmx-bind:url

The bind worked thank you!

Couldn’t create the expression via the UI as it only had a paste button, see below please.

[bpj]

You should be able to add it as a Dynamic Attribute (this section is towards the bottom of the properties panel of the API action)

[pedroponte]

Thank you! Can I leave the default url field empty?

Getting two API calls on the browser, one for localhost and another one for the correct server, any way to disable this please?

Many thanks

[bpj]

What is the id of the Server Connect that gets the apiURL?

As @apple suggests, now that you know where to look to use the UI for the dynamic URL, use that to point to the correct item from your sever connect.

If you have a dynamic URL, you don’t need a static one as the dynamic one will overwrite it as soon as the page is loaded anyway.

[pedroponte]

#edited#

@bpj

id of the Server Connect that gets the apiURL

I get that, the reason why I asked is because I see two requests and was wondering if I needed to manually disable the “url” tag/option. See above on my screenshots please.

Many thanks