T
TanStack•11mo ago
xenogeneic-maroon

How to Make ENV Accessible in a TanStack Start Server Build?

I'm using the Clerk example: Clerk Basic Example Environment Variables I have the following in my .env: 
CLERK_PUBLISHABLE_KEY=123
VITE_CLERK_PUBLISHABLE_KEY=123
NITRO_CLERK_PUBLISHABLE_KEY=123

CLERK_SECRET_KEY=1234
VITE_CLERK_SECRET_KEY=1234
NITRO_CLERK_SECRET_KEY=1234
CLERK_PUBLISHABLE_KEY=123
VITE_CLERK_PUBLISHABLE_KEY=123
NITRO_CLERK_PUBLISHABLE_KEY=123

CLERK_SECRET_KEY=1234
VITE_CLERK_SECRET_KEY=1234
NITRO_CLERK_SECRET_KEY=1234
App Config My app.config.ts uses the node-server preset since I plan to host on AWS Lightsail: 
import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },

  server: {
    preset: "node-server",
  },
});
import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
  },

  server: {
    preset: "node-server",
  },
});
Debugging Logs After running the build, in my __root.tsx I added: 
console.log(import.meta.env);
console.log(process.env);
console.log(import.meta.env);
console.log(process.env);
- Result: Only VITE_CLERK_* variables are visible in both logs during the build. Server Function Here’s the function that calls Clerk auth: 
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
  const { userId, sessionClaims } = await getAuth(getWebRequest());

  return {
    id: userId,
    dbId: sessionClaims?.metadata.db_user_id,
  };
});
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
  const { userId, sessionClaims } = await getAuth(getWebRequest());

  return {
    id: userId,
    dbId: sessionClaims?.metadata.db_user_id,
  };
});
- Error: 
Server Fn Error!
Error: @clerk/tanstack-start: Clerk: no secret key provided

[nitro] [request error] [unhandled] @clerk/tanstack-start: Clerk: no secret key provided
Server Fn Error!
Error: @clerk/tanstack-start: Clerk: no secret key provided

[nitro] [request error] [unhandled] @clerk/tanstack-start: Clerk: no secret key provided
My Question How do I make the server see CLERK_SECRET_KEY in the built version?
7 Replies
xenogeneic-maroon
xenogeneic-maroonOP•11mo ago
I updated the command to be this: 
node --env-file=.env .output/server/index.mjs
node --env-file=.env .output/server/index.mjs
I know this is the not best way but it includes the env for now
like-gold
like-gold•11mo ago
Did you update youir package.json > build: "node --env-file=.env .output/server/index.mjs && vinxi build"? how do you build it without vinxi?
xenogeneic-maroon
xenogeneic-maroonOP•11mo ago
these are the commands in the package.json 
    "build": "vinxi build",
    "start": "node --env-file=.env .output/server/index.mjs",
    "build": "vinxi build",
    "start": "node --env-file=.env .output/server/index.mjs",
I am currently using vinxi build. The issue is when I run the built version node .output/server/index.mjs, I can't see the env. I added the --env-file=.env as a quick fix, but its not the best way to do it
like-gold
like-gold•11mo ago
aha. that will not remove the Error: @clerk/tanstack-start: Clerk: no secret key provided, but already a good solution right now. I am not sure if that will require you to get the prod instance of your clerk connection.
xenogeneic-maroon
xenogeneic-maroonOP•11mo ago
It works on the VPS when I ran it on a prod instance with pm2
like-gold
like-gold•11mo ago
That's really good.
absent-sapphire
absent-sapphire•10mo ago
Hello, I ran into same issue, and as per vinxi server gh discussions (https://github.com/nksaraf/vinxi/issues/277), it's not possible to load env vars file using vinxi start. The work around with node --env-file=.env .output/server/index.mjs did the job locally.

Did you find this page helpful?