SvelteKit Environment Variables

---

Installation

npm install svelte-kit-env

How to use?

In the svelte.config.js file just add two lines of code like so

import addEnv from 'svelte-kit-env';

and

env: addEnv(),

1import adapter from '@sveltejs/adapter-auto';
2
3import addEnv from 'svelte-kit-env'; // here line 1
4
5/** @type {import('@sveltejs/kit').Config} */
6const config = {
7  kit: {
8    adapter: adapter(),
9
10    // hydrate the <div id="svelte"> element in src/app.html
11    target: '#svelte',
12  },
13  env: addEnv(), // here line 2
14};
15
16export default config;

.env file

Create .env in the svelte project root and for example add the KEY variable as follow

1KEY=123456789

Make a test

Check the validity of configuration by adding process.env['KEY'] in any svelte component

1// src/routes/index.svelte
2
3`<script>`
4  ...
5  console.log(process.env['KEY']);    // 123456789
6  // Note. Don't write proccess.env.KEY to avoid returning the undefined value
7  console.log(process.env.KEY) // undefined
8  ...
9`</script>`