How to access Environment Variables?

[jaspercroome]

Simple question with (hopefully) a simple answer - how can I access environment variables?
I'm working on an app that gets an auth token - locally, my redirect uri is localhost:3000/${pagename}, but when I deploy it'll have to be deployed-base-url/${pagename}.

Alternatively, is there another way to suss out my environment locally and do a ternary based on that value?

[jaspercroome]

for now, I can use window.location.origin for my use-case.

[mythmon]

Environment variables are available in data loaders and page loaders using the standard language features. For example, in a JavaScript data loader you can access environment variables with process.env, and in Python you could use os.environ. Environment variables are not directly accessible on Markdown files, or the JS files they import the run in the browser, since browsers don't have environment variables.

If you want to have the kind of configuration you are looking for, one option would be to generate the page with a page loader. That could read the environment variables and embed them in the generated page.

Another option would be to have a data loader that reads all the environment variables you want to be publicly available in the data app (like your redirect URL), and saves them to its output. For example:

const configuration = {
  oauthRedirectUri = process.env["OAUTH_REDIRECT_URI"];
}

process.stdout.write(JSON.stringify(configuration));

[jaspercroome]

awesome, thanks! I'm going with the simpler route this time around of just using location.origin but I'll give page loaders a try next time something like this pops up.

[mbostock]

It doesn’t sound like you’re asking about environment variables in the Unix sense but whether your site is being served on localhost:3000 or elsewhere? In which case as you surmised you can use location.origin to see where your site is being served in the client.

If you want to generate different pages/content locally during preview than what you deploy to production, you could also consider using page loaders or data loaders and setting an environment variable differently during build (e.g., NODE_ENV=production) as @mythmon described in #1737 (comment).