How to test if $env/dynamic/public environment variables working ?

[xmlking]

+page.svelte

<script lang="ts">
	import { env } from '$env/dynamic/public';

	console.log('PUBLIC_BASE_URL:', env.PUBLIC_BASE_URL);
</script>

.env

PUBLIC_BASE_URL=https://test.domain.com

build with ADAPTER=node npm run build

run with node build/ prints PUBLIC_BASE_URL: https://test.domain.com

now run again with PUBLIC_BASE_URL=https://test2.domain.com node build/ still prints old value PUBLIC_BASE_URL: https://test.domain.com

it is not picking up new dynamic value

Should SveltKit $env/dynamic/public' dynamically provide new value at runtime to the browser?

My observation
dynamic variables only working in development mode. i.e.,
PUBLIC_BASE_URL=https:/test2.domain.com npm run dev

but when application is build into docker container and run in production with changing environment variable value, it is not printing new value but only prints what was provided during build time.

[NormandoHall]

My observation
dynamic variables only working in development mode. i.e.,
PUBLIC_BASE_URL=https:/test2.domain.com npm run dev

Yes. You should use $env/static/public to hardcoded in compiled code.

When static, you should use the env key (ex PUBLIC_BASE_URL) instead of .env when dynamic:

import { PUBLIC_BASE_URL } from '$env/static/public';

[xmlking]

my requirements is not static.
we will be building code once as docker image and deploy to multiple environments with passing diffrent PUBLIC_BASE_URL values
eg.
dev env: PUBLIC_BASE_URL=https://app-dev.mydomain.com
qa env: PUBLIC_BASE_URL=https://app-qa.mydomain.com
prod env: PUBLIC_BASE_URL=https://app-prod.mydomain.com

[teemingc]

Hi xmlking,

I've managed to get a working stackblitz reproduction here.
You'll need to run npm run build and then your usual command PUBLIC_BASE_URL=https://test2.domain.com node build/.
Notice that there is no .env file and it relies on the env variable specified in the command.

One reason why it doesn't change could be that the page has been prerendered? That would explain why the data doesn't change at runtime.

[xmlking]

yes this code is invoked in home page where I enabled prerendered ,

the code where I am using $env/dynamic/public is here:
https://github.com/xmlking/svelte-starter-kit/blob/main/src/lib/stores/auth.store.ts#L22

I previous had

const appUrl = dev ? 'http://localhost:5173' : dynPubEnv.PUBLIC_BASE_URL;

but applied a temp workaround by no relaying on PUBLIC_BASE_URL for client side rendering(CSR).

const appUrl = browser ? window.location.origin : dynPubEnv.PUBLIC_BASE_URL;

when page rendered on server side(SSR) first time, it still depends on PUBLIC_BASE_URL variable.

I am also suspecting since I am using const for variable , it may not get updated when server pushed dynamic value.
I will try to change it to let

[teemingc]

you should disable the prerendered option. Prerendering will save and use the environment values present during build time.

[xmlking]

pre-rendering makes $env/dynamic/public behave like $env/static/public that was my problem.
@Rich-Harris it might be good idea to document this in https://kit.svelte.dev/docs/modules#$env-dynamic-public

lesson learned:
separate routes that need public-dynamic env variables and the pure static routes to take advantage of best of both.