🎄 Get 50% off from our JavaScript course for the holidays! 🎄
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 • 📖 3 min read

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:

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

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.

<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
Copied to clipboard!

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.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

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:

{
    BASE_URL: '/',
    DEV: true,
    MODE: 'development',
    PROD: false,
    SSR: false
}
The default enviroment variables available on import.meta.env
Copied to clipboard!

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.

.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
Copied to clipboard!

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!
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended

🎉 Thank you for subscribing to our newsletter. x