The Quick Way to Add Env Variables to Svelte using Vite

The Quick Way to Add Env Variables to Svelte using Vite

Working with env variables in Svelte + Vite
Ferenc Almasi β€’ 2022 November 02 β€’ Read time 3 min read
Learn how you can quickly add public and private environment variables to your Svelte add using Vite.
  • twitter
  • facebook

As Svelte uses Vite, and Vite uses dotenv to load environment variables into the app, all we have to do is introduce a .env file at the root of our project, and add our environment variables from there. Take the following as an example:

Copied to clipboard!
VITE_API_ENDPOINT=/cms/api
API_SECRET=1234
.env
Defining environment variables for Svelte in Vite

We defined two different environment variables, one for the API endpoint, and one for the secret key. Notice the difference in naming. Anything prefixed with "VITE" will be publicly available, while others are not.

To access the above-defined environment variables from a Svelte component, we can reference import.meta.env, plus the name of the environment variable.

Copied to clipboard!
<script>
    // This will log out /cms/api
    console.log(import.meta.env.VITE_API_ENDPOINT)

   // This will log out undefined
   console.log(import.meta.env.API_SECRET)
</script>
App.svelte
Accessing environment variables from a Svelte component

If we now try to log out the environment variable without the "VITE" prefix, it will be undefined. This prevents accidentally leaking sensitive information to the client. Any environment variable that has the "VITE" prefix will end up in your client bundle too.

Never store sensitive information in publicly available environment variables.

The value of the prefix can be changed if needed using the envPrefix property inside vite.config.js.


Default Environment Variables Exposed by Vite

Vite also exposes some other commonly used environment variables by default. You can see and access all of them if you log import.meta.env to your console. The following environment variables are available in Vite by default:

Copied to clipboard! Playground
{
    BASE_URL: '/',
    DEV: true,
    MODE: 'development',
    PROD: false,
    SSR: false
}
The default enviroment variables available on import.meta.env
  • BASE_URL: The base URL as a string where the app is being served from. This can be changed using the base config.
  • DEV: A boolean flag for telling whether the app is running in development mode (always the opposite of PROD)
  • MODE: The mode (as a string) the app is running in
  • PROD: A boolean flag for telling whether the app is running in production mode (always the opposite of DEV)
  • SSR: A boolean flag for telling whether the app is running in the server

Using Different Environment Variables for Different Environments

It's also possible to use different environment variables for different environments. For example, you might want to have different sets of variables for development and production. You can use the following naming convention in order to prepare different env variables for different environments.

Copied to clipboard!
.env                # Loaded in all cases
.env.local          # Loaded in all cases, but ignored by git
.env.[mode]         # Only loaded in the specified mode
.env.[mode].local   # Only loaded in the specified mode, but ignored by git

.env.development    # Only loaded in development mode
.env.production     # Only loaded in production mode

More specific environment files will always take priority, meaning if you have both a .env and a .env.development file, then .env.development will take priority over the more generic .env file.

Learn Svelte with 30 tips
Want to learn Svelte from the beginning? Check out these 30 tips to get up and running!
  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.