Environment variables in the browser

[nichoth]

Is there a preferred way to use environment variables in the browser? In vite you typically call import.meta.env.

I can define strings to replace via esbuild in the eleventy.config.js file, eg,

        await esbuild.build({
            target: 'es2022',
            define: {
                DEV: '' + (process.env.ELEVENTY_ENV !== 'production'),
            },
            // ...

Is there anther option?

Use case is showing debug console logs in the browser. I need to know if the site is on my local machine or not.

[Ryuno-Ki]

I personally define environment variables outside (e.g. the NODE_ENV) and have it handed to Eleventy as global data file.
Since the result is static files, the value at build time is persisted.

[siakaramalegos]

This is really going to depend on your deployment architecture as every system is different (e.g. on Netlify I do it differently than on Cloudflare). For example, the previous answer would not work for me because my deploys rebuild in a virtual environment separate from my local machine. Also, it greatly depends on whether those ENV variables should remain secret. There's no "11ty" way to handle env variables. Just do them the way that would best for you and how you deploy.

…

On Wed, May 7, 2025, 8:27 AM André Jaenisch ***@***.***> wrote: I personally define environment variables outside (e.g. the NODE_ENV) and have it handed to Eleventy as global data file. Since the result is static files, the value at build time is persisted. — Reply to this email directly, view it on GitHub <#3795 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABEOLMNBXYZEBI5VY452RJ325H3ZTAVCNFSM6AAAAAB4SASHTCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGMBWGI4DKMQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[nichoth]

To be clear, this is specifically for non-secret variables.

[siakaramalegos]

How are you deploying your site?

[nichoth]

Either Cloudflare or Netlify.

Another thing to note — I am only using the env variable in front-end JS, which I am compiling with esbuild.

I might stick with the esbuild config option, or else I could make some global data that depends on the build environment.