10

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 ??

Michał Gacka
  • 2,935
  • 2
  • 29
  • 45
Ben
  • 395
  • 1
  • 5
  • 16
  • Did you get an answer/solution specifically for svelte not sveltekit? Facing similar issue with Vite 4/Svelte. With Vite 3.x I was using dotenv and process.env and worked fine. Now, that works locally but not when deployed. – Pick Avana Dec 24 '22 at 17:11

4 Answers4

4

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..

hk7math
  • 277
  • 1
  • 7
  • 2
    Your answer is useful for SvelteKit. But unfortunately I'm seeking solutions for Vanilla Svelte. If you can, help me with this. By the way thanks a lot for the detailed answer. – Ben Jul 24 '21 at 08:18
  • Found this, and helped me understand a bit more: https://vadosware.io/post/pattern-for-env-in-sveltekit/ – xcorat May 22 '22 at 02:59
  • This seems to have disappeared from the FAQ for some reason – Alex Joseph Jul 27 '22 at 12:30
  • How is this the accepted answer? Although it might be useful for SvelteKit, the question was for Svelte only. – pbotas Oct 09 '22 at 01:33
4

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.

bersling
  • 17,851
  • 9
  • 60
  • 74
2

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.

zipzit
  • 3,778
  • 4
  • 35
  • 63
  • 4
    Do not do this. Everything that has the VITE_* prefix may be exposed in the client bundle. https://vitejs.dev/guide/env-and-mode.html#env-files "Since any variables exposed to your Vite source code will end up in your client bundle, VITE_* variables should not contain any sensitive information." – Kansuler Jan 07 '22 at 11:18
  • Thanks a lot @Kansuler , your comment saved my @ss , I don't know how the f did I miss that security notice in vite docs when I first learnt about env vars. I came here by luck as well while searching how to access env vars in `.svelte` files :) – a3k Jan 26 '22 at 14:38
  • 3
    Normally I’d delete this answer, but as @a3k has shown, it’s a valuable warning of what not to do. Perhaps a “Warning, do not do this” edit to my original response might be appropriate. – zipzit Jan 26 '22 at 17:27
1
  1. Make sure all your environment variables start with the prefix "VITE_".

Example:

VITE_API_KEY=8465313163463435434353535
  1. 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.