Netlify not loading environment variables

[mellunar]

I completed my Svelte project that runs on Rollup and I used Rollup replacer and dotenv to load environment variables. On localhost it works fine but when I deploy to Netlify, it does not. Netlify address is allowed on Firebase console.

[nathanmartin]

This doesn’t answer your issue of getting the keys to pass from Netlify into your app, but all of those keys are going to end up compiled into the front-end code.

So you could just hardcode them in and call it a day.

With a Firebase connection that is occuring via their SDK on the client, those keys will always be public.

[luke]

Hi, @mellunar. The environment variables only exist in the build environment. The build environment stops running when the build is complete and the environment variables no longer exist at that point. So, unless you take steps to hard code the environment variables in the javascript (which is not a recommended solution) they won’t exist for your javascript to use.

If this is client side javascript, please reconsider what you are doing. If you hard code these environment variable into the client side javascript, this will expose your API key to all site visitors and is probably a very bad idea.

A better solution would be to make those API calls inside a Function so that the API keys are hidden from the end user of the site. There is a support guide about this here:

[Support Guide] How do I keep my API keys/tokens safe using Netlify Functions?

Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun…

[nathanmartin]

@luke

If this is client side javascript, please reconsider what you are doing. If you hard code these environment variable into the client side javascript, this will expose your API key to all site visitors and is probably a very bad idea.

While this is generally the case, it isn’t correct in most situations with Firebase, for which those keys are intended to be public and the database protected by security rules. The linked support guide even mentions it.

Moving the Firebase connection into a serverless function and then communicating with it via a REST API can be done, but it usually isn’t what you would want. It removes the real-time capability of the system, and it adds both complexity and latency.

[luke]

Hi, @nathanmartin. You are correct and it does say this:

For instance, some types of Firebase and FaunaDB keys are intended to be public; they have a permissions model where little harm can be done and no data can be exported.

Thanks for pointing that out.