Skip to content

Instantly share code, notes, and snippets.

@thonkinator

thonkinator/miniflare-in-sveltekit.md

Last active November 15, 2024 23:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thonkinator/a4a73bbeb5b09f3c95fa5b769c8bd71c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thonkinator/a4a73bbeb5b09f3c95fa5b769c8bd71c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thonkinator revised this gist Oct 3, 2023. 1 changed file with 1 addition and 13 deletions.
    14 changes: 1 addition & 13 deletions miniflare-in-sveltekit.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,18 +8,6 @@ For setting up `@sveltejs/adapter-cloudflare`, see https://kit.svelte.dev/docs/a
    import { dev } from "$app/environment";
    import type { Miniflare } from "miniflare";

    const miniflareScript = `
    export default {
    fetch(req, _env, ctx) {
    ctx.waitUntil(Promise.resolve(req.url));
    return new Response(req.headers.get("X-Message"));
    },
    scheduled(_event, _env, ctx) {
    ctx.waitUntil(Promise.resolve(event.scheduledTime));
    }
    }
    `;

    let mf: Miniflare;

    export async function handle({ event, resolve }) {
    @@ -33,7 +21,7 @@ export async function handle({ event, resolve }) {
    d1Persist: "./d1-data",
    d1Databases: ["D1"],
    // you should also be able to add durable objects & r2
    script: miniflareScript,
    script: "",
    modules: true,
    });
    }
  2. thonkinator created this gist Sep 26, 2023.
    64 changes: 64 additions & 0 deletions miniflare-in-sveltekit.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    # Miniflare in SvelteKit!

    This requires the package `miniflare` (NOT any of the `@miniflare/`-scoped packages), as well as `@cloudflare/workers-types` if you're using TypeScript.
    For setting up `@sveltejs/adapter-cloudflare`, see https://kit.svelte.dev/docs/adapter-cloudflare

    ```ts
    // src/hooks.server.ts
    import { dev } from "$app/environment";
    import type { Miniflare } from "miniflare";

    const miniflareScript = `
    export default {
    fetch(req, _env, ctx) {
    ctx.waitUntil(Promise.resolve(req.url));
    return new Response(req.headers.get("X-Message"));
    },
    scheduled(_event, _env, ctx) {
    ctx.waitUntil(Promise.resolve(event.scheduledTime));
    }
    }
    `;

    let mf: Miniflare;

    export async function handle({ event, resolve }) {
    if (dev) {
    if (!mf) {
    const { Miniflare, Log, LogLevel } = await import("miniflare");
    mf = new Miniflare({
    log: new Log(LogLevel.INFO),
    kvPersist: "./kv-data",
    kvNamespaces: ["KV"],
    d1Persist: "./d1-data",
    d1Databases: ["D1"],
    // you should also be able to add durable objects & r2
    script: miniflareScript,
    modules: true,
    });
    }
    event.platform = { env: await mf.getBindings() };
    }
    return resolve(event);
    }
    ```
    ```ts
    // app.d.ts
    import type { D1Database, KVNamespace } from "@cloudflare/workers-types";

    declare global {
    namespace App {
    // interface Error {}
    // interface Locals {}
    // interface PageData {}
    interface Platform {
    // remember to add these bindings in your cloudflare dashboard!
    // should be in Workers & Pages > [your site] > Settings > Functions > scroll down to the bindings settings
    env: {
    KV: KVNamespace;
    D1: D1Database;
    };
    }
    }
    }
    ```