how to access .env from react tsx in astro? | Astro Lounge | Page 1

strong bloom Jan 29, 2023, 1:14 PM

#

tried the search, but none of the options seem to work.

I have a .env and process.env.NEXT_PUBLIC_PROJECT_ID; to access within the .tsx, but astro does not seem to pass it. If I pass the ID directly in .tsx it works.

raven thunder Jan 29, 2023, 1:18 PM

#

https://docs.astro.build/en/guides/environment-variables/

Astro Documentation

Using environment variables

Learn how to use environment variables in an Astro project.

#

Note that while all environment variables are available in server-side code, only environment variables prefixed with PUBLIC_ are available in client-side code for security purposes.

#

You can access env variables using import.meta.env.<your-variable>

stable gull Jan 29, 2023, 3:06 PM

#

raven thunder https://docs.astro.build/en/guides/environment-variables/

that won't work in .ts .js

#

in this example https://github.com/MicroWebStacks/astro-examples/tree/main#07_env-config I had to import env vars myself with dotenv then it works https://github.com/MicroWebStacks/astro-examples/blob/2fe418839d75183bc41f76558f2c566e6896a98c/07_env-config/src/pages/server.js#L4

strong bloom Jan 29, 2023, 3:29 PM

#

@stable gull thanks, I'll try this one. It's kinda weird that you have to go through so much trouble for something so basic 😭

#how to access .env from react tsx in astro?