conscious-sapphire

server env variables

Hey guys, there have been a lot of changes to vinxi, nitro and I am wondering as of the latest tanstack start version how we should go about injecting our environment variables server side. I can pass them through to vite just fine, using VITE_ prefix but when it comes to getting my server side env variables, I cannot find a solution. It seems to work in dev just fine, but not in production

33 Replies

dependent-tan•2mo ago

how are you reading your env vars ? import.meta.env on the client process.env on the server

const config = defineConfig(async ({ mode }) => {
  process.env = {
    ...process.env,
    ...import.meta.env,
    ...loadEnv(mode, process.cwd(), ''),
  }
  ~~~~

const config = defineConfig(async ({ mode }) => {
  process.env = {
    ...process.env,
    ...import.meta.env,
    ...loadEnv(mode, process.cwd(), ''),
  }
  ~~~~

i also added this at the beginning of my vite.config.ts file

equal-aqua•2mo ago

I am also experiencing some issue about this. The env on my prisma after building cannot be read. After building the app this the error

error: Environment variable not found: VITE_DATABASE_URL.
  -->  schema.prisma:14
   |
13 |   provider = "postgresql"
14 |   url      = env("VITE_DATABASE_URL")
   |

error: Environment variable not found: VITE_DATABASE_URL.
  -->  schema.prisma:14
   |
13 |   provider = "postgresql"
14 |   url      = env("VITE_DATABASE_URL")
   |

dependent-tan•2mo ago

uh, your database URL should probably NOT be a public env var VITE_* vars are public and bundled at build time you can see them as build time macros

equal-aqua•2mo ago

I already use also the Not VITE . I first used process.env.DATABASE_URL! on an .env file. Still getting the same error

dependent-tan•2mo ago

how are you setting the env in prod ? and how are you running the prod build

equal-aqua•2mo ago

I directly put the url of my db. Since this project is for local atm. I followed the instruction to run node .output/server/index.mjs I used TurboRepo for building prod I am using prisma-orm btw Turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": ["dist/**"],
      "env": ["DATABASE_URL"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "db:generate": {
      "cache": false
    },
    "db:migrate": {
      "cache": false,
      "persistent": true
    },
    "db:deploy": {
      "cache": false
    }
  }
}

{
  "$schema": "https://turbo.build/schema.json",
  "ui": "tui",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": ["dist/**"],
      "env": ["DATABASE_URL"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "db:generate": {
      "cache": false
    },
    "db:migrate": {
      "cache": false,
      "persistent": true
    },
    "db:deploy": {
      "cache": false
    }
  }
}

dependent-tan•2mo ago

no i mean, WHERE is this set

dependent-tan•2mo ago

also this doesnt make sense

dependent-tan•2mo ago

you dont need the db url to build it shouldnt be bundled in your build because it should be read at runtime (not build time)

equal-aqua•2mo ago

I followed the instructions from Prisma Docs about TurboRepo https://www.prisma.io/docs/guides/turborepo

How to use Prisma ORM with Turborepo | Prisma Documentation

Learn step-by-step how to integrate Prisma ORM with Turborepo to build modular, scalable monorepo architectures efficiently.

dependent-tan•2mo ago

ah i see, it runs the migration (weird to me but eh) anyway where is the env ?

equal-aqua•2mo ago

Does my Project set-up is wrong base on my turbo.json?

equal-aqua•2mo ago

the .env is on apps/wed directory.

dependent-tan•2mo ago

ah i think that's the issue

dependent-tan•2mo ago

see your .env* path maybe try apps/web/.env* or maybe **/.env* (i doubt the second works)

equal-aqua•2mo ago

Do I need to set this also?

const config = defineConfig(async ({ mode }) => {
  process.env = {
    ...process.env,
    ...import.meta.env,
    ...loadEnv(mode, process.cwd(), ''),
  }
  ~~~~

const config = defineConfig(async ({ mode }) => {
  process.env = {
    ...process.env,
    ...import.meta.env,
    ...loadEnv(mode, process.cwd(), ''),
  }
  ~~~~

in my vite.config?

dependent-tan•2mo ago

not sure, but i would think so

equal-aqua•2mo ago

OH! NICELY DONE! Thank you!! This one solves the issue!

dependent-tan•2mo ago

great glad i could help @ryeact_dev although do note that this is potentially problematic: you'll be reading ALL env files in the monorepo. You could have multiple env files with multiple DATABASE_URL, which will cause conflicts not sure what the best solution is in this scenario, but i would assume prefixing your variable names could be an idea

equal-aqua•2mo ago

Sorry but the one that I tested was a cached of the build with direct inject url in prisma schema. Now that I try to build again. The errors comes back and I again direct inject the db url in prisma schema. I don't know the problem in reading the env files in the server side. I also tried Drizzle ORM still getting the same error :: Cannot read env vars in runtime

dependent-tan•2mo ago

instead of **/.env* have you tried apps/web/.env* ?

equal-aqua•2mo ago

Yes! I have tried that too. What does this do when you add this on config? Maybe for the meantime I will opt-out or cover my db-url in prisma schema before commtting to git.

dependent-tan•2mo ago

loadEnv forces vite to load the runtime env, and then it is set into process.env

equal-aqua•2mo ago

This only works if using vite build? But no in turbo build?

dependent-tan•2mo ago

your turbo builds seems to run the build task of your apps/web subrepo or, at least, it should which should be something like vite build mine's this: "build": "cross-env NODE_ENV=production BUILD_ENV=production vite build", because i do things during build that require those vars in fact, here are dev/start/build for me

"dev": "vite dev --port 3000",
    "start": "node --env-file-if-exists=.env .output/server/index.mjs",
    "build": "cross-env NODE_ENV=production BUILD_ENV=production vite build",

"dev": "vite dev --port 3000",
    "start": "node --env-file-if-exists=.env .output/server/index.mjs",
    "build": "cross-env NODE_ENV=production BUILD_ENV=production vite build",

the start command explicitely loads the .env file but this shouldn't matter to you as your issue happens at build time if i understood correctly what happens if you remove the dependency on DATABASE_URL @ryeact_dev

dependent-tan•2mo ago

as in, here

dependent-tan•2mo ago

if you have "env": [] instead

equal-aqua•2mo ago

Nothing change it’s. I just tried to remove and put it back again. Doesnt change anything. Maybe Ill just remove turbo and use vite for build

dependent-tan•2mo ago

are you planning on making a real monorepo ? as in, a lot of apps and libs inside a single repo ? if no, yeah, don’t bother too much with turborepo and even if you need to have a monorepo, i find Nx to be more robust and less Vercel biased

equal-aqua•2mo ago

No. I will remove turbo tomorrow, Thank you! Anyways can I ask you somthing about ts-router thing? How to update searchParams without a full reload on page? I have tried navigate to ‘.’ and pass the params but it will rerender the whole page

dependent-tan•2mo ago

that’s the way to do it, but it shouldn’t rerender the page though 🤔 or it means you have a weird useeffect/usestate combo

equal-aqua•2mo ago

I found that the cli I used adds router state checking and reload if update. Thats the cause of reloading the poage

Gaming

Programming

server env variables

Did you find this page helpful?