CD
Cloudflare Developers•3mo ago
dan—1106

SvelteKit (Vite) + D1 + Prisma Local development

I have a SvelteKit app that I'm developing with a D1 database accessed through Prisma. I'm trying to run the Vite development server locally and have it connect to D1 locally. My app works when deployed to workers (with experimental assets enabled), and can read/write from the D1 database via Prisma. The code to initialize my database connection is: 
import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';
import { env } from '$env/dynamic/private';

const adapter = new PrismaD1(env.DB);
const prisma = new PrismaClient({ adapter });
export default prisma;
import { PrismaClient } from '@prisma/client';
import { PrismaD1 } from '@prisma/adapter-d1';
import { env } from '$env/dynamic/private';

const adapter = new PrismaD1(env.DB);
const prisma = new PrismaClient({ adapter });
export default prisma;
Running locally, I typically run vite dev --host Is there a way to get vite dev running so that it can access a local D1 Instance provided by Wrangler? If not, is there a way to get that running so that my local dev environment could write to a real/hosted D1 instance that I specify? Let me know if there's other info that could be helpful
1 Reply
dan—1106
dan—1106OP•3mo ago
I have solved this issue, but to help anyone else who comes across this: In your svelte.config.js file, be sure to reference the configuration in your wrangler.json/toml: 
import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
        // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
        // See https://svelte.dev/docs/kit/adapters for more information about adapters.
        adapter: adapter({
            config: 'wrangler.json',
            platformProxy: {
                config: 'wrangler.json',
                environment: 'prod',
                experimentalJsonConfig: true,
                persist: true
            }
        })
    }
};

export default config;
import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
        // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
        // See https://svelte.dev/docs/kit/adapters for more information about adapters.
        adapter: adapter({
            config: 'wrangler.json',
            platformProxy: {
                config: 'wrangler.json',
                environment: 'prod',
                experimentalJsonConfig: true,
                persist: true
            }
        })
    }
};

export default config;
The bindings are not then available through $end/dynamic/private locally, they're only available in the context of a request. For example for a D1 database called DB, it would be accessible in the context of a request/hook as event.platform?.env.DB

Did you find this page helpful?