useful-bronze

Access environment variables inside server action

I've been trying to access environment variables from inside server actions. I've made an .env file that I have put several environment variables inside. However, when I console.log(process.env) and console.log(import.meta.env), I don't see any of my environment variables. Note that I don't want the variable to be public - so the solution is not to put vite_ in front of the variable name. From the docs:

They can access sensitive information, such as environment variables, without exposing them to the client

Server Functions | TanStack Router React Docs

What are Server Functions? Server functions allow you to specify logic that can be invoked almost anywhere (even the client), but run only on the server. In fact, they are not so different from an API...

12 Replies

metropolitan-bronze•9mo ago

Are you having this problem during development or prod?

useful-bronzeOP•9mo ago

Development Sorry if it's a known issue, I did a quick search in discord and the docs, but couldn't find anything within 3 minutes of searching

correct-apricot•9mo ago

having the same issue, reading through the nitro docs, import.meta.env should have all variables, and it should also work with cloudflare: https://nitro.build/deploy/providers/cloudflare#environment-variables

Cloudflare - Nitro

Deploy Nitro apps to Cloudflare.

equal-aqua•8mo ago

import.meta.env doesn't hold runtime env vars for cloudfare - https://github.com/TanStack/router/discussions/2985

extended-salmon•8mo ago

I know that is outdated but I was trying to follow this example: https://github.com/timoconnellaus/tanstack-start-workers/tree/main

GitHub

GitHub - timoconnellaus/tanstack-start-workers

Contribute to timoconnellaus/tanstack-start-workers development by creating an account on GitHub.

extended-salmon•8mo ago

It shows how to use bindings and wanted to try it out for env variables in server functions apparently thats and old version of tanstack start but he can access event.context.cloudflare inside a createServerFn

const incrementCount = createServerFn("POST", async () => {
  const event = getEvent();
  const response =
    await event.context.cloudflare.env.tanstack_start_workers.get("count");
  if (!response) {
    await event.context.cloudflare.env.tanstack_start_workers.put(
      "count",
      JSON.stringify({ count: 1 }),
    );
  } else {
    const previousCount = JSON.parse(response).count as number;
    await event.context.cloudflare.env.tanstack_start_workers.put(
      "count",
      JSON.stringify({ count: previousCount + 1 }),
    );
  }
});

const incrementCount = createServerFn("POST", async () => {
  const event = getEvent();
  const response =
    await event.context.cloudflare.env.tanstack_start_workers.get("count");
  if (!response) {
    await event.context.cloudflare.env.tanstack_start_workers.put(
      "count",
      JSON.stringify({ count: 1 }),
    );
  } else {
    const previousCount = JSON.parse(response).count as number;
    await event.context.cloudflare.env.tanstack_start_workers.put(
      "count",
      JSON.stringify({ count: previousCount + 1 }),
    );
  }
});

He is able to do it in DEV using this middleware

import { defineMiddleware } from "vinxi/http";

export default defineMiddleware({
  onRequest: async (event) => {
    if (import.meta.env.DEV) {
      const { getPlatformProxy } = await import("wrangler");
      const proxy = await getPlatformProxy<Env>();
      event.context.cloudflare = proxy;
    }
  },
});

import { defineMiddleware } from "vinxi/http";

export default defineMiddleware({
  onRequest: async (event) => {
    if (import.meta.env.DEV) {
      const { getPlatformProxy } = await import("wrangler");
      const proxy = await getPlatformProxy<Env>();
      event.context.cloudflare = proxy;
    }
  },
});

extended-salmon•8mo ago

Sadly with the current version of tanstack start, using this server function, there is a really weird interaction with the event object, This middleware would persist event.context.me with its value This will actually log i reach here (also in other tests it would console.log cloudflare object) But as soon as I try to persist it (tried with different names, it just gets wiped.

extended-salmon•8mo ago

Using API Routes works nice ofc

export const APIRoute = createAPIFileRoute('/api/hello')({
  GET: async () => {
    const event = getEvent()
    return new Response(
      'Hello, World! from ' + event.context.cloudflare.env.DB_URL,
    )
  },
})

export const APIRoute = createAPIFileRoute('/api/hello')({
  GET: async () => {
    const event = getEvent()
    return new Response(
      'Hello, World! from ' + event.context.cloudflare.env.DB_URL,
    )
  },
})

@Tanner Linsley any ideas of where this could come from? My fear is that I just have to use some middleware properly D:

ratty-blush•8mo ago

Some things in here might help: https://discord.com/channels/719702312431386674/1315659242606297179

extended-salmon•8mo ago

will try this later today https://discord.com/channels/719702312431386674/1238170697650405547/1309541781632974980 ty @Mozzy

extended-salmon•8mo ago

no luck @Mozzy

ratty-blush•8mo ago

If it helps, I have a working example here: https://github.com/leonlarsson/leon-home

Gaming

Programming

Access environment variables inside server action

Did you find this page helpful?