Public and private environment variables
Context:
.env
AZURE_STORAGE_CONNECTION_STRING=""
config
// app.config.ts
import { defineConfig } from "@tanstack/start/config";
import viteTsConfigPaths from "vite-tsconfig-paths";
export default defineConfig({
server: {
preset: "azure_functions",
},
vite: {
plugins: () => [
// this is the plugin that enables path aliases
viteTsConfigPaths({
projects: ["./tsconfig.json"],
}),
],
},
});
I tried accessing the env var in a server function via
const connectionString = import.meta.env.AZURE_STORAGE_CONNECTION_STRING;
this doesn't work for some reason. returning undefined.
Also, how can I access an environment variable both in the server functions and in a client side?
5 Replies
rare-sapphireOP•11mo ago
also, accessing the variable via process.env.AZURE_STORAGE_CONNECTION_STRING works just fine
frail-apricot•11mo ago
for server envs use
process.env for client envs use import.meta.env.VITE_rare-sapphireOP•11mo ago
.env file
AZURE
VITE_AZURE_CONTAINER
so in this case I can access VITE_AZURE_CONTAINER in client side using import.meta.env.VITE_AZURE_CONTAINER, right?
frail-apricot•11mo ago
No the one with VITE is accessible on both client and server side
So if you want it only accessible on server use
process.env but if you want it accessible both in client and server use `import.meta.env.VITE`
Example
rare-sapphireOP•11mo ago
Got it, I will try this. Thanks for your help!