Access .env from a webpage app

Glitch Help
1

I notice the plain webpage comes with a .env file but unlike a node app I am not sure how I would access keys in this file.

2

you could use webhooks

3

Creating a webpage from the new project menu shouldn’t show a .env file. If that’s what you saw then it’s a bug. Although, I’ve just tried and it didn’t for me. So let us know your browser version and OS and we’ll look into it. Thanks.

4

screenshot
Unbenannt.PNG1142×739 35.8 KB

the env-file is all empty

6

Actually, I can reproduce using the homepage new project option as opposed to the in editor one. We’ll get it fixed up.

1 Like
7

@Gareth is there any way to access .env variables from a static website? perhaps the way glitch serves static sites injects .env vars into some client-accessible place?

my use case:
i’d like to make a webpage-only template project for using an api that people can remix. but if my client id is hardcoded into the html / js, people remixing may forget to replace the client id with their own.

8

Hi @zhammer, I’m afraid that usage of the env file requires server-side code of some sort to work - those environment variables are only present in the container that the project is running on and so are only available to code running in that environment. A static site only executes code in the browser environment and knows nothing about the server-side environment.

There are a couple of workarounds that might be useful here.

  1. You might be able to leverage the webserver configuration for the package we use to handle static sites and dynamically set the client id. That configuration style isn’t something we’d typically expect someone using a plain old static site to know anything about, and leveraging it may (probably will) make the site a little harder to understand at a glance. I haven’t tried this, so I’d have to think about the details of how this might work.
  2. you could configure your project so that when it’s remixed it replaces the client id only in Remixes and not on the base project. This can also get a little convoluted and clutters up the base project with some extraneous information, but with a well-crafted README can be clear enough, and can produce a Remix that’s easy to understand, even if the base project has a little bit of complexity in it.
9

Thanks @cori! Yep I probably don’t want to mess around with the webserver configuration, especially for a simple starter site that I’d want people to remix without much complexity.

you could configure your project so that when it’s remixed it replaces the client id only in Remixes and not on the base project.

if i’m understanding this right, is there a way to customize the ‘remix’ cloning from base project to remixed project? is there documentation (or a support post) about this?