This guide will show you to use Doppler to manage and supply environment variables to Vite and Svelte powered applications to populate the
The first step is to create your Doppler account (free to get started, no credit card required) which will then take you to the Doppler dashboard.
Next, install the Doppler CLI into your local development environment and authenticate your machine so it can fetch secrets from Doppler by running:
From the dashboard Create a Project which will contain the environment variables for your Vite application.
Then in your code editor or IDE, open a terminal and configure which Doppler project and environment will be used for supplying secrets to your application by running:
To prevent the accidental leakage of system environment variables into your application, variable names must have the
If you are using a
.env file with your Vite application, you can import that directly into your Doppler project by running:
doppler import .env
Otherwise, you can add environment variables using the Doppler dashboard:
Now that your Vite environment variables are stored in Doppler, you can now dynamically inject them into your application in your development environment by running:
doppler run -- vite
This makes your Doppler secrets with a
VITE_ prefix available on the
export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY
You can also use the Doppler CLI for previewing Vite applications using:
doppler run -- vite preview
Using Doppler in CI/CD environments can be done either by syncing environment variables to your CI/CD provider using Doppler Integrations, or you can use a Service Token in conjunction with the CLI in your build environment.
Create a custom Build environment in your project and import your build environment variables:
export DOPPLER_TOKEN="dp.st.cicd.xxxx" doppler run -- vite build
Now you know how to securely manage and inject environment variables into Vite and Svelte applications using Doppler.
Updated almost 2 years ago