Cloudflare Developers•12mo ago

/functions directory alternative?

If I compare the two cloudflare adapters side-by-side I can see that the adapter-cloudflare (https://kit.svelte.dev/docs/adapter-cloudflare#comparisons) should be enough since Functions is a part of Cloudflare Pages. But it seems we need to have the /functions directory at the root level of the project. I’m wondering whether that is always true or whether there is an exception for Sveltekit. "As long as your directory follows the proper structure, Pages will identify and deploy your functions to our network with your site." Maybe the “proper structure” for Sveltekit is different than it is for other frameworks and we don’t need the /functions directory. How does one access worker resources on Pages / Platform/ Functions from within a Sveltekit app using adapter-cloudflare? Another complication is the documentation at https://kit.svelte.dev/docs/adapter-cloudflare#bindings "SvelteKit's built-in $env module should be preferred for environment variables... To make these types available to your app, reference them in your src/app.d.ts:" Are the env variables in scr/app.d.ts connected to the $env module? In other words, how to use the preferred module, $env instead of or along with the src/app.d.ts file? -- the above is part of my post at https://community.cloudflare.com/t/how-do-you-properly-access-cloudflare-resources-from-within-a-sveltekit-app/518591

Cloudflare Community

How do you properly access Cloudflare resources from within a Svelt...

In a SvelteKit application, how are the various server.js files related to Cloudflare Workers? If my SvelteKit application wants to use something like R2 or D1, do you put that code inside the appropriate JS file within your SvelteKit application, or does do you put it into an external JS file that is a separate Cloudflare Worker and then call ...

SvelteKit docs

Cloudflare Pages • SvelteKit documentation

14 Replies

ajgeiss0702•12mo ago

From the sveltekit docs: https://kit.svelte.dev/docs/adapter-cloudflare#notes

ajgeiss0702•12mo ago

basically: you can't use /functions. You should implement them as sveltekit endpoints instead As for local development (which I believe is what you were asking in the post you sent), you should use sveltekit's local dev server. I use miniflare's API to get the bindings, then use hooks to put it in the platform object

cris•12mo ago

Thanks, that's pretty much what I thought but I didn't see it that clearly stated anywhere in the documentation. (Maybe it is and I missed it?)

ajgeiss0702•12mo ago

yeah, i linked where it says that 😉

cris•12mo ago

Thanks again, yes, I saw that but it only added to my confusion. I don't need to take any intermediary steps to test this out locally. I'm just trying to learn Sveltekit and Cloudflare Pages and all I need to do is git push to see the results. I don't need to preview them . So I was looking for something like, "Don't even put a /functions directory in your Sveltekit project." Instead, I'm seeing "it won't work in deployment" but you have to use it: "To begin, simply add a ./functions directory in the root of your project, and inside a JavaScript or TypeScript file, export a function handler." (from https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/)
Thanks so much for helping me see this more clearly.

ajgeiss0702•12mo ago

yeah, i see the confusion here. The issue is you were looking at the CF docs for deploying all your own code to CF pages, instead of the docs for deploying a sveltekit application on CF pages. You can sorta ignore a lot of the stuff not specifically about CF and kit. Keep it in mind though, as knowing how everything works can come in handy

cris•12mo ago

Agreed. Now I have to actually try and add a function and figure out what to do about the src/app.d.ts file vs $env. I'll reach out if I get stuck. Once more, thank you so much. I often don't reach out on discord or elsewhere until I've suffered a bunch alone and in silence, so it's nice to finally get some help.

ajgeiss0702•12mo ago

yw. feel free to ping me if you have more questions

cris•11mo ago

I added some functions and got an error with one of them. I'm trying to figure it out. I posted my problem on Svelte discord. https://discord.com/channels/457912077277855764/1126316406904979487/1126316584978350141 While in the d1-open-alpha channel. Did you happen to see my comments on using d1? I got it working but only when I used TypeScript, not JsDoc and it wasn't even an option with Sveltekit if I'd only wanted javascript. Any idea off-hand why that would be? https://discord.com/channels/595317990191398933/992060581832032316/1126679612794085456

ajgeiss0702•11mo ago

I’ve never tried using JsDoc. A little bit when I first started with svelte, but I switched to typescript pretty quickly However, even with typescript, setting up D1 with miniflare was a bit odd. It might be different with the latest, but I haven’t had time to migrate yet But if you don’t care about local dev rn, then it should be somewhat easy with normal js. Just call the binding

cris•11mo ago

When I create a sveltekit app, I get three choices: JsDoc, TS, or plain JS. With plain JS, there is no app.d.ts file while with the other two there are. The documentation for Cloudflare functions (both on Cloudflare's site and Sveltekit's) is that you have to add environmental variables to app.d.ts, e.g. the interface platform in the case of D1. I'm still trying to understand why the documentation says we should prefere $env and maybe this has something to do with it. In other words, with JsDoc and TS, there's an app.d.ts file in which to add the interface platform env variable and bindings, e.g., DB: D1Database.

declare global {
        namespace App {
                // interface Error {}
                // interface Locals {}
                // interface PageData {}
                   interface Platform {
      env: {
        DB: D1Database;
      };
      context: {
        waitUntil(promise: Promise<any>): void;
      };
      caches: Cache
        }
}

export {};

declare global {
        namespace App {
                // interface Error {}
                // interface Locals {}
                // interface PageData {}
                   interface Platform {
      env: {
        DB: D1Database;
      };
      context: {
        waitUntil(promise: Promise<any>): void;
      };
      caches: Cache
        }
}

export {};

How would I call a binding for D1 if I don't have the app.d.ts file? Right now it might be easier to just use typescript.

ajgeiss0702•11mo ago

Iirc the app.d.ts is just used while developing and compiling your app. If it’s not used (if you’re just using JavaScript) then it’s not needed I believe you should just be able to do platform.env.BINDING

cris•11mo ago

Great. Thanks for that. Something to look into. Thanks again for your help.

ajgeiss0702•11mo ago

Gaming

Programming

/functions directory alternative?