Cloudflare Developers•5mo ago

Dashboard environment variables not available on process.env at build time

I'm trying to deploy a tincms project to cloudflare pages. I've added these env vars in the dashboard for the project. The build-time config for tina tries to read them off process.env:

console.log('Process.env:', process.env);
console.log('Tina Client ID:', process.env.NEXT_PUBLIC_TINA_CLIENT_ID);
console.log('Tina Token:', process.env.TINA_TOKEN);

console.log('Process.env:', process.env);
console.log('Tina Client ID:', process.env.NEXT_PUBLIC_TINA_CLIENT_ID);
console.log('Tina Token:', process.env.TINA_TOKEN);

But they're undefined, breaking the build. What am I missing?

8 Replies

b1ueh4wk•3mo ago

I am having the same problem!

mattamOP•3mo ago

I gave up unfortunately, but will still need to figure this out 🫠

Jansen•3mo ago

also having this issue

b1ueh4wk•3mo ago

https://discord.com/channels/595317990191398933/1109670750627057725/1109670750627057725 I know that this isn't the most desired function, but at the very entrance of your application, can you console.log the process object? and can you console.log the process.env object? I was able to access the process.env on my front-end application using console.logs, and I was able to find my environment variables. Cloudflare Pages has 2 "environments" Production & Preview; You should define these environment variables for both so if you are testing on the "dev" environment you will still be able to access these. Workers & Pages > YOUR_PAGE > Settings > Choose Environment: > Select Production OR Preview. I was having an issue with my changes to my pages being cached, and when I would push up the changes I realized that my changes were not live (it was still returning the cached previous version). So for a while I thought I couldn't access my process.env because I wasn't getting console.logs. Additionally I would update the keys and cloudflare would have a problem deploying the new keys, so I had to push updates a few times. Console.logs shouldn't remain in the application of course, and any environment variables used in front-end applications will be exposed to your users. Using devtools users will be able to retrieve the tokens and keys to api's.

Athestar•3w ago

I have same problem in my remix cloud page project In my case, the project does not work with wrangler pages dev since the process.env is empty when build time. To fix this I used the vite-config to define env variables

{
        define: {
           __ENV__: JSON.stringify(envResult),
        },
        plugins: [
            remix(),
            tsconfigPaths({ ignoreConfigErrors: true }),
        ],
        ...

{
        define: {
           __ENV__: JSON.stringify(envResult),
        },
        plugins: [
            remix(),
            tsconfigPaths({ ignoreConfigErrors: true }),
        ],
        ...

And I created a script and called it at start of entry.server

let base = process.env;
if (Object.keys(base).length === 0) {
    base = typeof __ENV__ !== 'undefined' ? __ENV__ : {};
}
for (const v of base) {
    if (base[v] && base[v] !== 'undefined') {
        process.env[v] = base[v];
    }
}

let base = process.env;
if (Object.keys(base).length === 0) {
    base = typeof __ENV__ !== 'undefined' ? __ENV__ : {};
}
for (const v of base) {
    if (base[v] && base[v] !== 'undefined') {
        process.env[v] = base[v];
    }
}

So I can get the process.env at below of the script. But it's also not resolution, so if wrangler builds entry.server with a module that needs process.env before the above script, the module will not get process.env as well. I met this matter now I'd like to discuss with anyone can help

theo•3w ago

I believe CF pages will inject those vars into the build environment, but not into the running application environment. Within workers, process.env vars are not set and you must get env vars from the current request object. Some frameworks provide adapters which try to hide this from you and make process.env work like you're used to outside of cloudflare doing static replacement at build time makes sense, although you must be extra careful not to leak any secrets into your built client code @mattam - can you provide more code to show what you are doing? What is that tina cms config file? When is it called? @Athestar - I may be able to help with remix specifically

Athestar•3w ago

Thanks @theo , make sense! I will try to update with the remix request adapter

theo•3w ago

Another gotcha for anyone coming across this thread - which I just ran into myself, is that if you are running your build command via turbo, it will not pass through all env vars by default - so you must explicitly call them out!

Gaming

Programming

Dashboard environment variables not available on process.env at build time

Did you find this page helpful?