Cloudflare Developers•8mo ago

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•8mo 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

Gaming

Programming

Remix local dev with hot reload and resource binding