How do you actually use ENV variables?

[osseonews]

Simple issue, but driving us nuts. How do you use ENV variables on client code and server code?

We read the docs here: https://vike.dev/env
We created a .env.development file and added an ENV variable.: PUBLIC_ENV__SOME_KEY=123
We then called this variable in a function: {import.meta.env.PUBLIC_ENV__SOME_KEY} (in react) or in backend function: const testKey = import.meta.env.PUBLIC_ENV__SOME_KEY

But this ENV is undefined? Actually, the editor gives the error: Property 'env' does not exist on type 'ImportMeta'.

So totally confused by how to do this in a React application. In NextJS, we just used process.env in the react code to get the public variables, NEXT_PUBLIC.

And actually, we are trying to implement a link component, like you show here: examples/base-url-server/components/Link.jsx - but that example uses the import.meta. how??

[osseonews]

Is the proper approach to just get the ENV variables in the renderer and then pass them down to the pageContext so they can be used in a client component? As these are Public ENVs and not "secret", this seems secure and the only way to do it, as far as I can tell. Otherwise, the Importmeta doesn't seem to work in children components, apparently you can only use it in the Page?

[brillout]

You can use import.meta.env anywhere, but you may need to use dotenv yuourself if you have files that aren't processed by Vite. See my other comment.

[brillout]

Have you seen this note?

For files not processed by Vite, you need to manually install dotenv for your .env values to also be available in files that aren't processed by Vite.

[osseonews]

Yes, we got it to work with env files finally, but unfortunately, now in dev, we can only access the production env. Actually, we can't develop in dev mode at all and can't figure out how to do it, so development is a really trying experience.

As a background, we are using Cloudflare Workers. Originally, we copied your example for this, but the problem with your example is that it uses Service Workers and not the recommended ES Modules approach. See: https://developers.cloudflare.com/workers/reference/migrate-to-module-workers/

So we upgraded the code to use ES Modules and it works in production, but not for development. Can't seem to get the Dev Server approach in the original repo to work with ES Modules syntax, throws all sorts of errors.

Anyway, using Workers Sites is in a sense deprecated now. See the warning on this on the workers sites page in cloudflare: https://developers.cloudflare.com/workers/configuration/sites/ - so I think this is the wrong approach long-term anyway.

So we thought a better approach is to just set up Vike with Cloudflare Pages to start and maybe it will work. We started looking into this and the Cloudflare Pages example is also using the wrong module approach and is quite outdated. So next step is that we will try to figure out how to do this in Cloudflare Pages using ES Module approach (actually only allowed approach now in CF Pages) and maybe it will solve our problems.

I think it would be great, if you have an updated Cloudflare Pages implementation. I think it's basically just about setting up Vite on Cloudflare (they have a guide for that), and the advanced mode using a _worker.js file (https://developers.cloudflare.com/pages/functions/advanced-mode/) to call Vike. Seems simple and their second example on that page seems like all you need, but I haven't tried it yet.

[osseonews]

BTW, just created a new discussion here, as we got it working with Cloudflare pages. Please see that topic and let me know how i can share. Thanks.

[brillout]

It's indeed been a while we didn't update the Cloudflare examples. I'm very much looking forward to your example. Also PR welcome to udpate examples/cloudflare-workers-react/ (or the Vue one). The Cloudflare examples are part of Vike's CI, so it's very much worth it to update them.

[osseonews]

Just posted link to public repo on other discussion. Thanks.

[lourot]

(for someone else passing by: https://github.com/travis-r6s/vike-cf-pages [EDIT: I mixed up] https://github.com/osseonews/vike-app-cfp)