How do I get a Replit secret key to work using Svelte?

Question

I'm stuck on what seems like a simple task. I want to run a weather app I built in Svelte and run it on Replit. The app uses an API with a key, so I added my key to Secrets in Replit and gave it the name MY_API_KEY.

In the file that calls the API, I used the following:

const MY_API_KEY = process.env.MY_API_KEY;

Unfortunately, that doesn't work. My app doesn't load. When I change the variable in my file to include the key itself, the app runs fine, so I must not be calling up the environmental variable right. Does anyone know how this works in Svelte? I'd appreciate any help.

Answer 1

The base Svelte template on Replit uses Vite for building it's apps. This means you can do it the Vite way:

Call your environment variables something like VITE_ApiKey=123 And in your code use import.meta.env.VITE_ApiKey

Note that this only works for environment variables prefixed with VITE_