CD
Cloudflare Developers•10mo ago
naourass

Remix local dev with hot reload and resource binding

I'm using the remix template (vite compiler) to develop a pages project locally. I can't find how to add bindings to D1 or KV so I can simulate them locally with live reload support. I read that cloudflareDevProxyVitePlugin set up some proxies for that but not sure how that works. Should I run both wrangler pages dev and remix vite:dev? Should I add some watch command? Any help will be appreciated. Thanks!
1 Reply
Adi
Adi•10mo ago
Hey there, I've set this up quite recently. Let me show you the relevant files. vite.config.ts 
import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remixCloudflareDevProxy(), remix(), tsconfigPaths()],
});
import {
  vitePlugin as remix,
  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
} from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [remixCloudflareDevProxy(), remix(), tsconfigPaths()],
});
wrangler.toml 
name = "my-project"
compatibility_date = "2024-01-20"

[[ d1_databases ]]
binding = "DB"
database_name = "my-project-db"
database_id = "DB_ID"
migrations_table = "d1_migrations"
migrations_dir = "d1_migrations"
name = "my-project"
compatibility_date = "2024-01-20"

[[ d1_databases ]]
binding = "DB"
database_name = "my-project-db"
database_id = "DB_ID"
migrations_table = "d1_migrations"
migrations_dir = "d1_migrations"
load-context.ts (this file is pre-made when you use the Remix Cloudflare template). Simply modify the env type to include D1 
import { type PlatformProxy } from 'wrangler';

interface Env {
  DB: D1Database;
}

type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>;

declare module '@remix-run/cloudflare' {
  interface AppLoadContext {
    cloudflare: Cloudflare;
  }
}
import { type PlatformProxy } from 'wrangler';

interface Env {
  DB: D1Database;
}

type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>;

declare module '@remix-run/cloudflare' {
  interface AppLoadContext {
    cloudflare: Cloudflare;
  }
}
And that's pretty much it tbh. Remember to setup the D1 binding for your pages project in production. In local dev everything should just work normally. If you're unsure how to setup remix with Cloudflare, simply use 
npx create-remix@latest --template remix-run/remix/templates/cloudflare
npx create-remix@latest --template remix-run/remix/templates/cloudflare
Sorry, I figured I should clarify to answer your question exactly. There is no extra setup needed. Remix and vite will automatically use wrangler + miniflare in the background to simulate local resources you have defined in wrangler.toml

Did you find this page helpful?