Remix local dev with hot reload and resource binding

naourass · 2024-03-27T19:36:53.798Z

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!

A

Adi•3/28/24, 3:26 AM

Hey there, I've set this up quite recently. Let me show you the relevant files.

A

Adi•3/28/24, 3:28 AM

vite.config.ts

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()],
});

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()],
});

A

Adi•3/28/24, 3:28 AM

wrangler.toml

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"

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"

A

Adi•3/28/24, 3:29 AM

load-context.ts

load-context.ts

load-context.ts

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;
  }
}

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;
  }
}

A

Adi•3/28/24, 3:32 AM

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.

A

Adi•3/28/24, 3:34 AM

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

npx create-remix@latest --template remix-run/remix/templates/cloudflare

npx create-remix@latest --template remix-run/remix/templates/cloudflare

A

Adi•3/28/24, 3:40 AM

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

wrangler.toml

Remix local dev with hot reload and resource binding

Similar Threads

Similar Threads

Similar Threads