how to replace strings with .env (dotenv-flow) with svelte-kit? - sveltekit

Question

Inside svelte.config.js I have this:
preprocess: autoPreprocess({
replace: [
['API_ENDPOINT', JSON.stringify(process.env.API_ENDPOINT)]
]
}),
It should replace the string "API_ENDPOINT" but it isn't.
Here is how I'm using it:
async function api(url: string, body = {}, opts = {}) {
const endpoint = 'API_ENDPOINT';
console.log(endpoint);
const res = await fetch(endpoint + url, {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify(body)
});
if (!res.ok) {
const err = await res.json();
throw (err || res.statusText);
}
return opts.raw ? await res.text() : await res.json();
}
export default api;
All i get is http://localhost:3000/API_ENDPOINT/subscriptions

Answer 1

in your svelte.config.js file, instead of
autoPreprocess({
replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});
use
import sveltePreprocess from 'svelte-preprocess'
sveltePreprocess({
replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});
It seems to me that autoPreprocess was deprecated but the README docs were not correctly updated.
You also may want to consider doing one of the following:
use process.env.API_ENDPOINT directly
const endpoint = process.env.API_ENDPOINT;
create a separate javascript function to handle environment variables
something like this
envVars.js
import dotenv from 'dotenv-flow';
import path from 'path';
dotenv.config({
path: path.resolve(__dirname, `path-to-your-(.env)-file`),
});
export const getEnvVar = (key) => process.env[key];
and use it like this:
import { getEnvVar } from 'path-to-envVars'
const endpoint = getEnvVar('API_ENDPOINT');
if you're already using Vite as your build tool
Add the variables in a .env file like so:
VITE_YOUR_ENV_VAR_GOES_HERE=bar
in your case:
VITE_API_ENDPOINT=your_value
then import them in a separate javascript or typescript file
envVars.js
export const envVars = {
API_ENDPOINT: import.meta.env.VITE_API_ENDPOINT
};
and then import envVars and use it as so:
import { envVars } from 'path-to-envVars.js'
and now you can read your environment variable like this:
envVars.myVariable
or, in your case
const endpoint = envVars.API_ENDPOINT