3

I am making a site for a very small organisation I am involved in, and have been asked to design it in a way where hosting costs virtually nothing. I have opted to use SvelteKit (hosted on Cloudflare Pages) and PocketBase (hosted on PocketHost). Using hardcoded secrets, I was able to achieve the desired behavior (a news, team and projects page), however I want to switch to a safer/more robust solution, using environment variables.

I want to be able to access the environment variables inside +page.server.js files, to log into my PocketBase instance. I also want to be able to test with Wrangler, which I have had trouble with (for example: what is my entry-point supposed to be?). I have read the docs of both Cloudflare pages and SvelteKit in regards to env variables, SvelteKit and Cloudflare, but it doesn't really make sense to me.

I am a very new developer and I'm sorry if something went right over my head, or it's super obvious, but any help would be appreciated.

lia07
  • 89
  • 7

1 Answers1

2

In the CloudFlare UI, go to Pages » your project » Settings » Environment variables. Define all your environment variables here.

In your SvelteKit app, access them via '$env/static/private' if they can be baked in at build time or '$env/dynamic/private' if they need to be read at runtime. For example:

import { API_KEY } from '$env/static/private';

And that’s it. See https://kit.svelte.dev/docs/modules#$env-static-private.

Geoffrey Booth
  • 7,168
  • 5
  • 35
  • 42