Svelte client-side environment variables

[bellangerq]

Hello!

I’m using Netlify to host my website built with Svelte.

I have a local .env file where I store environment variables. I want to have access to these variables on the client-side on the production website. I added them in the Netlify dashboard (“Build and deploy” > “Environment”) but still, I don’t have access to it.

Am I missing something? Is there any special command/configuration to do?

If it can help, here is the project GitHub repository.

Thanks for helping

[DavidWells]

A couple things to check:

1. Are the ENV keys the same in .env file as they are in remote netlify settings?
2. Does this albedo/rollup.config.js at e65625ee3206a4cc3f52ee4a3f715032cc54b8cf · bellangerq/albedo · GitHub have the values? E.g. will it read values from the terminal process AND .env file? It might only read from .env file, not sure how this works. Console.log that in your build script to verify the values are set
3. Are the values set in process in general. console.log(process.env.YOUR_KEY) in a build script to verify the values are non null

If the value aren’t being read from process.env but instead from a non existent .env file, you could write out the process.env variables in the Netlify build into a .env file in a prebuild step (when running in Netlify CI)

[bellangerq]

Hello David,

1. Yes, the keys are the same in the .env file and in the Netlify settings. In this case: OPEN_WEATHER_MAP_API_KEY.
2. I just added a log in the main.js file to output the content of process.env. Locally, it prints the OPEN_WEATHER_MAP_API_KEY key and its value. On the production website, it prints an empty object.
3. Do you have additional resources about creating a build script that would write out env variables in a pre build step? I’m a casual Netlify user and never created a custom build script .

Thank you for your help!

[perry]

hey @bellangerq,

can you do a quick sanity check for me and make sure there isn’t something in your .gitignore that is preventing your .env file from being pushed to your repo?

I’m not 100% sure about this, but this may be why it works locally but not on the server.

[bellangerq]

Hello Perry,

Indeed, my .gitignore file does contain this line:

.env

But it’s because I prefer that my API keys are not publicly available.

It works if I remove this line (variable is available on production website) but if I can avoid it, it would be nice (even if for this case, it’s just a small side project without sensible data).

Is there any way to supply environment variables without pushing them to the repository?

Thanks for your help anyway!

[luke]

Hi, @bellangerq, you can add those environment variables in the site settings in our UI. This is done under, Site Name > Settings > Build & deploy > Environment.

Would you please try setting the environment variables there? Also, please let us know if there are any other questions or if that doesn’t work for any reason.

[bellangerq]

Hi Luke,

I already added my environment variable in the Netlify UI. But even though I set the variable in the UI, it is not taken into account and once the site is built and deployed, the variable is not present in process.env.

I’m looking for a way to access my env variable on the production website. Is it mandatory to push the .env file to my GitHub repository?

[luke]

Hi, @bellangerq, are you wanting to use the environment variable in a Function or in the javascript running in the end user’s browser?

There is more information about the latter here:

[Support Guide] Using environment variables on Netlify correctly

Last reviewed: August 2023 The preferred way to use environment variables in Netlify is to set them in our environment - be that in the Environment Variables settings UI (on the site’s “Build & Deploy settings” page), or via netlify.toml. You’ll want to choose the right pattern to meet your needs. Setting variables in our UI may be considered a bit more secure, since only people with access to the Netlify admin UI for your site can see them, rather than “anyone who can clone your repo!”. Thes…

The environment variable only exists in the build system at Netlify. Unless you have taken steps to embed that environment variable somewhere in the static files for the site deploy (for example as a literal string somewhere in a javascript, HTML, CSS, JSON or other file), it won’t be present for the deployed site.

If this issue is client side javascript missing the environment variable, the “common issue” topic above should have answers. If there are still questions after reading that, please let us know.

If this is a Function not having the environment variable, please let us know which function this is happening for.

[bellangerq]

Thank you for the detailed response Luke!

I’ll take a look at the linked post, it should answer my question.