{"id":15715565,"url":"https://github.com/ponjimon/vite-plugin-tss-cloudflare-proxy","last_synced_at":"2025-05-12T23:52:23.219Z","repository":{"id":257802749,"uuid":"864074769","full_name":"Ponjimon/vite-plugin-tss-cloudflare-proxy","owner":"Ponjimon","description":"A Vite plugin to make Cloudflare Bindings work locally when using TanStack Start.","archived":false,"fork":false,"pushed_at":"2024-09-27T16:06:34.000Z","size":130,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-12T23:52:16.292Z","etag":null,"topics":["bindings","cloudflare","plugin","proxy","start","tanstack","tanstack-start","tsup","typescript","vite","vite-plugin","wrangler"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ponjimon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-27T12:53:19.000Z","updated_at":"2025-04-24T12:25:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0d05a6d9-43b5-401a-b611-f743abb4a20f","html_url":"https://github.com/Ponjimon/vite-plugin-tss-cloudflare-proxy","commit_stats":null,"previous_names":["ponjimon/vite-plugin-tss-cloudflare-proxy"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ponjimon%2Fvite-plugin-tss-cloudflare-proxy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ponjimon%2Fvite-plugin-tss-cloudflare-proxy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ponjimon%2Fvite-plugin-tss-cloudflare-proxy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ponjimon%2Fvite-plugin-tss-cloudflare-proxy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ponjimon","download_url":"https://codeload.github.com/Ponjimon/vite-plugin-tss-cloudflare-proxy/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843171,"owners_count":21972869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bindings","cloudflare","plugin","proxy","start","tanstack","tanstack-start","tsup","typescript","vite","vite-plugin","wrangler"],"created_at":"2024-10-03T21:42:00.697Z","updated_at":"2025-05-12T23:52:23.199Z","avatar_url":"https://github.com/Ponjimon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/@ponjimon/vite-plugin-tss-cloudflare-proxy)](https://www.npmjs.com/package/@ponjimon/vite-plugin-tss-cloudflare-proxy) [![JSR Package](https://jsr.io/badges/@ponjimon/vite-plugin-tss-cloudflare-proxy)](https://jsr.io/@ponjimon/vite-plugin-tss-cloudflare-proxy) [![node-current](https://img.shields.io/node/v/@ponjimon/vite-plugin-tss-cloudflare-proxy)](https://nodejs.org/)\n\n# vite-plugin-tss-cloudflare-proxy\n\nA Vite plugin to make Cloudflare Bindings work locally when using [TanStack Start](https://tanstack.com/router/v1/docs/framework/react/start/overview).\n\n## 📦 Install\n\n```sh\nnpm i -D vite-plugin-tss-cloudflare-proxy\n```\n\n```sh\nyarn add -D vite-plugin-tss-cloudflare-proxy\n```\n\n```sh\npnpm add -D vite-plugin-tss-cloudflare-proxy\n```\n\n```sh\nbun add -D vite-plugin-tss-cloudflare-proxy\n```\n\nOr, using JSR:\n\n```sh\nnpx jsr add @ponjimon/vite-plugin-tss-cloudflare-proxy\n```\n\n```sh\nyarn dlx jsr add @ponjimon/vite-plugin-tss-cloudflare-proxy\n```\n\n```sh\npnpm dlx jsr add @ponjimon/vite-plugin-tss-cloudflare-proxy\n````\n\n```sh\nbunx jsr add @ponjimon/vite-plugin-tss-cloudflare-proxy\n```\n\n## 👨‍💻 Usage\n\n```ts\nimport cloudflareDevProxyVitePlugin from '@ponjimon/vite-plugin-tss-cloudflare-proxy'\nimport { defineConfig } from '@tanstack/start/config'\n\nexport default defineConfig({\n  vite: {\n    plugins: () =\u003e [\n      cloudflareDevProxyVitePlugin(),\n    ],\n  },\n})\n```\n\nNext, create a `env.d.ts` file in `app/env.d.ts` with the following content:\n\n```ts\n/// \u003creference types=\"@cloudflare/workers-types\" /\u003e\n\nimport type { H3EventContext } from 'vinxi/http'\nimport type { PlatformProxy } from 'wrangler'\n\ninterface EnvVars {\n    // Add your bindings here\n    // KV: KVNamespace\n}\n\ndeclare global {\n  interface Env extends EnvVars {}\n}\n\ndeclare module 'vinxi/http' {\n  interface H3EventContext {\n    cf: CfProperties\n    cloudflare: Omit\u003cPlatformProxy\u003cEnv\u003e, 'dispose'\u003e\n  }\n}\n\ndeclare global {\n  interface Request {\n    context: H3EventContext\n  }\n}\n```\n\nNext, you will have to update the API entry handler (`app/api.ts`):\n\n```diff\n--- app/api.ts\n+++ app/api.ts\n@@ -1,3 +1,11 @@\n-import { createStartAPIHandler, defaultAPIFileRouteHandler } from '@tanstack/start/api'\n+import { defaultAPIFileRouteHandler } from '@tanstack/start/api'\n+import { eventHandler, toWebRequest } from 'vinxi/http'\n \n-export default createStartAPIHandler(defaultAPIFileRouteHandler)\n+const apiHandler = eventHandler(async (event) =\u003e {\n+  const request = toWebRequest(event)\n+  request.context = event.context\n+  const res = await defaultAPIFileRouteHandler({ request })\n+  return res\n+})\n+\n+export default apiHandler\n```\n\nNow you will have access to the Cloudflare bindings locally but also on the edge, for example:\n\n```ts\nimport { createAPIFileRoute } from '@tanstack/start/api'\n\nexport const Route = createAPIFileRoute('/api/completion')({\n  GET: async ({ request }) =\u003e {\n    const res = await request.context.cloudflare.env.AI.run('@cf/meta/llama-3.1-8b-instruct', {\n      messages: [{ role: 'user', content: 'Hello, World!' }],\n    })\n    if ('response' in res) {\n      return new Response(res.response)\n    }\n    return new Response('No response')\n  },\n})\n```\n\n## ⚠️ Caveats\n\u003e [!IMPORTANT]\n\u003e This plugin is still experimental and may not work for all use cases.\n\u003e It is specifically tailored to work with the `@tanstack/start` framework.\n\u003e \n\u003e Currently, it will **only** work with [API Routes](https://tanstack.com/router/v1/docs/framework/react/start/api-routes).\n\u003e [Server Functions](https://tanstack.com/router/v1/docs/framework/react/start/server-functions) are **not** supported yet.\n\n## 🙏 Acknowledgements\n\nThe base for this plugin was taken from [Remix](https://github.com/remix-run/remix/blob/6f83cf3d11436f6306a5d5f2468ce2cc4fe8e3ea/packages/remix-dev/vite/cloudflare-proxy-plugin.ts)\n\nAnd a special thanks to [opennextjs-cloudflare](https://github.com/opennextjs/opennextjs-cloudflare/blob/11802c4973ed887ae48d6fef721f107399a5a668/packages/cloudflare/src/api/get-cloudflare-context.ts#L72) for overcoming [this issue](https://github.com/nksaraf/vinxi/issues/348).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fponjimon%2Fvite-plugin-tss-cloudflare-proxy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fponjimon%2Fvite-plugin-tss-cloudflare-proxy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fponjimon%2Fvite-plugin-tss-cloudflare-proxy/lists"}