Okupter

Understanding environment variables in SvelteKit

Justin's profile pic

Justin Ahinon

Last updated on

Understanding environment variables in SvelteKit

Environment variables are probably one of the most used features in NodeJS applications. They allow storing sensitive information such as API keys, database credentials, and other information that should not be stored in the codebase. SvelteKit has a very great first-class support for environment variables. From type checking to server/client-side access, the meta-framework makes it very easy to access and consume environment variables.

Accessing environment variables in a NodeJS application

The most straightforward way to access environment variables in a NodeJS application is to prefix the execution command with the environment variable. For example, to set the environment variable NODE_ENV to production, you can run the following command:

NODE_ENV=production node index.js

assuming that the index.js file is the entry point of the application.

This methods can quickly become tedious to scale when you have multiple variables to set. That’s why NodeJS provides the process.env global variable that’s injected at runtime. process.env can be used to access environment variables present on the system where the application is running and set in the application itself.

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(process.<span class="hljs-property">env</span>.<span class="hljs-property">PATH</span>);
node index.js

This will print the PATH environment variable to the console.

Environment variables: the SvelteKit way

At is core, SvelteKit is a Vite plugin that runs the Svelte compiler. That means any SvelteKit application inherits the environment variables features that are provided by Vite.

You can then load and use in mostly all the parts of your SvelteKit application the following environment variables:

  • import.meta.env.MODE - The current mode of the application. It can be either development or production.

  • import.meta.env.BASE_URL - The base URL of the application.

  • import.meta.env.PROD - A boolean that indicates whether the application is running in production mode.

  • import.meta.env.DEV - A boolean that indicates whether the application is running in development mode.

  • import.meta.env.SSR - A boolean that indicates whether the application is running in server-side rendering mode.

Also per default, only environment variables defined in the .env file and that starts with VITE_ can be accessed by client side code by running import.meta.env.VITE_*. All the other environment variables are only accessible by server-side code.

Note that the VITE_ prefix is the default, and this configuration can be changed in the svelte.config.js file.

Most of the time, though, you will not need to use the import.meta.env global variable directly. This is because SvelteKit comes with some handy features that make it very seamless to use environment variables. With those features, you can access the variables in a type safe way, and have a clear separation between client and server-side variables. Let’s see how.

Private static environment variables

Static environment variables are loaded by Vite from the .env file using process.env . These variables are likely to be used by the server-side code. Think of database credentials, API keys, and other sensitive information that should not be stored in the codebase.

These variables are statically injected at build time in the code, and must not be prefixed with the public prefix for client-side variables (VITE_ by default).

To load static environment variables, you can create a .env file at the root of your project and add the variables you want to load. For example, to load the DATABASE_URL environment variable, you can add the following line to the .env file:

DATABASE_URL=postgres://user:password@localhost:5432/mydb
<span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">DATABASE_URL</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;$env/static/private&#x27;</span>;

“Server-side code” being any code that runs in the +page.server.js or +service.js files.

Public static environment variables

Public static environment variables work almost the same way as private static environment variables. The only difference is that they are prefixed with the public prefix for client-side variables (VITE_ by default).

VITE_API_URL=https://api.example.com
<span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">API_URL</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;$env/static/public&#x27;</span>;

Private dynamic environment variables

These variables are accessed during runtime. They are dynamic because they can change at runtime, and might vary depending on the environment where the application is running.

<span class="hljs-keyword">import</span> { env } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;$env/dynamic/private&#x27;</span>; 
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">DEPLOYMENT_ENV</span> = env.<span class="hljs-property">DEPLOYMENT_ENV</span>;

Public dynamic environment variables

They work the same way as private dynamic environment variables, but they are prefixed with the public prefix for client-side variables (VITE_ by default).

The documentation for environment variables in SvelteKit can be found here:

TypeScript support

SvelteKit comes with a great support for TypeScript. That means that you can use environment variables in a type safe way. For example, if you have the following environment variable:

API_KEY=123456789

And you try to call it in your code:

<span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">APID_KEY</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;$env/static/private&#x27;</span>;

you will get a type error because the APID_KEY variable is not defined in the env.d.ts file (note the “D” at the end of API). To fix this, you can add the following line to the .svelte-kit/ambient.d.ts file. This provides a great developer experience, and makes it easy to properly call environment variables.

More interesting, you can not directly use variables imported from private static and private dynamic modules in Svelte components (.svelte files), which are client-side.

Conclusion

Environment variables are a great way to configure your application. They are easy to use, and provide a great developer experience. SvelteKit makes it even easier to use them, and provides a great support for TypeScript.

Once you get to know how they work, you will wonder how you could have lived without them.