This post is from my blog.
When using environment variables in web apps, we use it as process.env.YOUR_ENV
in most cases.
I wrote about deploying SvelteKit app with Vercel in the previous post.
In this post, I tell you about using environment variables in SvelteKit and using them in Vercel as process.env
.
1. Create a .env
file
At first, create a .env
file in your project root and then add some variables. For example:
// .env
VITE_MY_API_KEY="<MY_API_KEY>"
VITE_MY_URL="<MY_URL>"
Note that you should add prefix VITE_ to your variables. This is because SvelteKit uses Vite under the hood.
I recommend you add .env
to .gitignore
by the way.
2. Using environment variables in SvelteKit
Convert variables so that it can be used in your project.
For example, create Env.js
in lib
directory and declare them.
Note that the file name(here Env.js
) is arbitrary, but not a .svelte
file.
javascript
// src/lib/Env.js
export const MY_API_KEY = import.meta.env.VITE_MY_API_KEY;
export const MY_URL = import.meta.env.VITE_MY_URL;
import.meta.env
is the object in Vite.
You can now use them in your project.
javascript
// sample.svelte
import { MY_API_KEY } from '$lib/Env';
console.log(MY_API_KEY);
3. Using them as process.env
in Vercel app
To use your environement variables as process.env
in Vercel, you should add the setting in svelte.config.js
.
javascript
// svelte.config.js
const config = {
kit: {
// ...
vite: {
define: {
'process.env': process.env,
},
},
}
};
export default config;
Check the following settings compilerOptions.paths
of jsconfig.json
. If not, add it.
javascript
// jsconfig.json
{
// ...
"compilerOptions": {
"baseUrls": ".",
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"]
}
},
// ...
}
Finally, although I donβt know this is the best practice, use them as follow for instance:
javascript
// sample.svelte
import { MY_API_KEY } from '$lib/Env';
let myApiKey;
if (process.env.NODE_ENV === 'production') {
// For production
myApiKey = process.env.MY_API_KEY;
} else {
// For development
myApiKey = MY_API_KEY;
}
- Configuration in Vercel
*See this article for how to deploy your app in Vercel.
Add your environment variables in the Vercel Settings.
5. Done
You can now use process.env
in SvelteKit app hosted with Vercel.
Top comments (3)
I first get it done by using your checking NODE_ENV approach. Later I found other using dotenv package to achieve similar result. source
npm i dotenv
and then
no need to change any config files, the same code apply to both development and production env. Eliminated the need to check NOED_ENV at run time.
I like this method too, the downsides is that you need to add a package for production and import
dotenv/config
in every single file you use it.But the good thing is that you can still use the
VITE_
prefixed variables on the client, and non-prefixed ones in the server in files files hooks and endpoints, without the client know about them.I only think VITE shoud expose non-prefixed ones to server only automatically, and
VITE_
prefixed ones to both server and client, I simply don't know why on earth this isn't the default behaviour.Thanks for this article it helped me get set up with env variables.
With recent sveltekit updates I had to remove define:{... from the svelte config file and put it into vite.config.js:
I also saw this come out recently, looks like it could be a new way to deal with env variables.
kit.svelte.dev/docs/modules#$env-d...