How to load environment variables in Svelte using Vite or Svite - environment-variables

Question

I've been trying to figure out best practices on implementing environment variables for API configurations in Svelte App. As far as I know, We have to use either Vite or Svite to make it work. Can anyone help me find a solution please ??

Answer 1

This is how I did it but I bet there are other good practices
I make use of dotenv and $lib provided by SvelteKit.
Below are my folder structure and related js:
├── sveltekit-project/ // Root
| ├── src/
| | ├── lib/
| | | ├── env.js
| | | ├── other.js
| | | ...
| | |
| | ├── routes/
| | | ├── main.svelte
| | | ...
| | ├── app.html
| | ...
| ├── .env
/** /src/lib/env.js **/
import dotenv from 'dotenv'
dotenv.config()
export const env = process.env
/** /src/lib/other.js **/
import { env } from '$lib/env'
const secret = env.YOUR_SECRET
By the way, I recommend you reading the "How do I use environment variables?" part in SvelteKit FAQ. It seems very relevant to what you concern, but I am afraid it means some workarounds are needed instead of the VITE_* variables..

Answer 2

There seems to be some confusion around the security issues, but it's actually quite simple.
If you want to use insensitive information, proceed like this:
create an .env and/or .env.local, .env.production file, read more here https://vitejs.dev/guide/env-and-mode.html#env-files
name your variable VITE_<some name> for example VITE_API_URL to store where your backend location is. That's not sensitive information so it's ok to expose this through your svelte app to the internet.
you can then access this directly inside of the script tags in svelte like this: import.meta.env.VITE_API_URL
If you have sensitive information:
Then you shouldn't expose it in a svelte client... PLEASE don't do something like suggested in Saad's answer and expose your API key to the public! Instead you'll need a server to securely hold that information, but how to setup a server is then again a different topic.

Answer 3

Warning
The VITE_ prefix would expose sensitive information to client side! More info
Normally, I'd simply delete this answer, but its clear that the whole import.meta.env.VITE_SECRET_PASSWORD is not a clever design. What is the point of using a .env variable that is not secure, per the security note warning at https://vitejs.dev/guide/env-and-mode.html#env-files ??
As a developer, my expectation is that I can use .env variables to store secure information.
Let this answer stand as a warning: Do not do this.
My original response below:
I spent some time struggling here..
Environment Variable file, must be named .env:
VITE_SENDGRID_API_KEY=SG.9999999999....999999999999
I spent way too much time to figure out that sendgrid.env as a filename will not work.
I added a file to the /src/lib directory called env.js. Here are the complete contents of that file:
export const ENV_OBJ = {
SENDGRID_API_KEY: import.meta.env.VITE_SENDGRID_API_KEY,
TEST: "test, test, test"
};
And then when I need it elsewhere...
import { ENV_OBJ } from '$lib/env'
// console.log("API Key.test: ", ENV_OBJ.TEST);
sgMail.setApiKey(ENV_OBJ.SENDGRID_API_KEY);
I'm using SvelteKit, Javascript, etc... No extra dotenv. Keep it simple, make it easy.

Answer 4

Make sure all your environment variables start with the prefix "VITE_".
Example:
VITE_API_KEY=8465313163463435434353535
Include your variable in the Svelte file using the syntax "import.meta.env.VARIABLE_NAME".
Example:
headers: {
"X-RapidAPI-Key": import.meta.env.VITE_API_KEY
}
And that's it. Hope that helps.