Environmental Variables for URL in API Data Source

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?

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.

1 Like

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:
image

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

1 Like

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.

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.

1 Like

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.

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

1 Like

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.

1 Like

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

1 Like

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}}

2 Likes

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