Issue with env variables on GCP and logging / Lack of documentation

[Quentin-Piot]

Hello everyone,

First of all, congratulations to the framework's creators, it's a great job!

Having so far only worked on Next, I wanted to try React Router V7 to try a new way of doing SSR. Unfortunately, I've come up against quite a few problems. The documentation doesn't seem to be very exaustive on the framework side, and sometimes taking inspiration from the Remix v2 doc isn't enough.

I have a secret API key that I'd like to use in my frontend. To avoid disclosing it on the client side, I was thinking of using it on the server-side in a loader. Unfortunately, while it works well in dev to make a process.env.<API_KEY>, it no longer works in production. FYI, I'm using Cloud Run for deployment, as Vercel doesn't offer an option for React-Router at the moment.

I've tried everything: setting CloudBuild variables during build (--build-arg), setting variables at deployment (--set-env-vars), using the variables and secrets environment option on CloudRun (which seems to me the most logical option because it's runtime?). Nothing works.

And another problem: my server logs don't appear with react-router-serve. I haven't found a way to fix this either.

Thanks for your help!

[nvanmeurs]

Hi all,

We're facing the same issue, on the server side we try to use process.env.SESSION_SECRET, this works great in development when loading from an environment variable. However, in production on Azure App Services we can't get it to work. Further testing showed that it doesn't even work locally either, example:

react-router build
SESSION_SECRET="xxxxxxxx" react-router-serve ./build/server/index.js

In application code:

console.log('Environment variables from Remix');
console.log(JSON.stringify(process.env, null, 4));
console.log('End of environment variables from Remix');

const sessionSecret = process.env.SESSION_SECRET;
if (!sessionSecret || sessionSecret.trim() === '') {
  throw new Error('SESSION_SECRET is not defined or is empty.');
}

The output will be:

{
    "WSL2_GUI_APPS_ENABLED": "1",
    "HOSTTYPE": "x86_64",
    ...ton of other WSL / NPM environment variables
    "npm_package_dependencies_duckdb_wasm_kit": "^0.1.38",
    "npm_package_dependencies_react": "^19.0.0",
    "NODE_ENV": "production"
}
End of environment variables from Remix
Error: SESSION_SECRET is not defined or is empty.
    at file:///home/nick/projects/datablender/datablender-ui/build/server/index.js:4937:9
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In short, process.env seems to be available, but these values are actually hardcoded in the server/index.js during build time. Runtime environment variables don't seem to work.

@Quentin-Piot Were you able to fix it on your side?

[Quentin-Piot]

I didn't find anything sorry. I just went back to the client-side library ...