Vue app to access URL env variable when using netlify dev

Support
, ,
1

Hi,

I’ve been trying to figure out how to read netlify env vars from the app. The only one I could see being available so far is NETLIFY_DEV.

The command used by netlify dev is vue-cli-service serve and I have a .env file that has this entry:

VUE_APP_URL=$URL

but when the app is running VUE_APP_URL is an empty string.

I also tried using node -p process.env to see what env vars are available and it seems that only NETLIFY_DEV is there, no URL

Is there anything I’m missing?
Thanks!

2

Hi, @sid. The URL variable only exists in the build system.

The only workaround I know is to manually set and export the $URL environment variable in the local shell itself.

3

Hi @luke

Sorry I didn’t completely get that :sweat_smile:
Did you mean that it’s not available on netlify dev and that I’d have to kinda do it manually?
From the source code it does seem like URL gets set to a value: https://github.com/netlify/cli/blob/f3d6577b3c95fe9f04dac1c0533469ec496a8b82/src/commands/dev/index.js#L420 but only after it has started running the child process

4

Hi,

Can you clarify which URL you are trying to access and for what purpose? that will help us to give you better advise.

5

Hi,

I was trying to access the hostname to decide where api requests should go, e.g.

  • in my code if it’s hosted on customdomain.netlify.com I’d make calls to customdomain.netlify.com/api,
  • if it’s a local dev environment with the URL being localhost:8888 I’d make calls to localhost:8888/api
    and I was thinking of using the $URL provided by Netlify to achieve it

However, after trying out some deploys I realized $URL is pretty much always the publicly deployed URL and won’t meet my purpose.

I ended up simply using the js snippet location.origin to get what I needed instead.

Thanks for looking into this tho, I appreciate it. We can close this issue now :slight_smile:

6

Thanks for clarifying @sid, that was where I was getting and your solution is the better way of checking the URL origin. Glad you were able to resolve that!