{"id":13605326,"url":"https://github.com/yjl9903/vite-plugin-cloudflare-functions","last_synced_at":"2025-03-15T11:32:53.851Z","repository":{"id":56859555,"uuid":"525788803","full_name":"yjl9903/vite-plugin-cloudflare-functions","owner":"yjl9903","description":"Make Cloudflare Pages Functions works with Vite friendly","archived":false,"fork":false,"pushed_at":"2024-05-13T14:33:15.000Z","size":1872,"stargazers_count":40,"open_issues_count":5,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-13T15:58:26.040Z","etag":null,"topics":["cloudflare","cloudflare-pages","cloudflare-workers","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://vite-plugin-cloudflare-functions.pages.dev/","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/yjl9903.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":"2022-08-17T12:48:48.000Z","updated_at":"2024-05-28T00:50:39.476Z","dependencies_parsed_at":"2023-09-24T05:01:42.406Z","dependency_job_id":"750beb5f-128e-41d0-b4b1-bc056f196e25","html_url":"https://github.com/yjl9903/vite-plugin-cloudflare-functions","commit_stats":{"total_commits":239,"total_committers":3,"mean_commits":79.66666666666667,"dds":"0.37656903765690375","last_synced_commit":"d0137a50b708d497ae4455d431088586874ec35b"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-cloudflare-functions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-cloudflare-functions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-cloudflare-functions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yjl9903%2Fvite-plugin-cloudflare-functions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yjl9903","download_url":"https://codeload.github.com/yjl9903/vite-plugin-cloudflare-functions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725010,"owners_count":20337658,"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":["cloudflare","cloudflare-pages","cloudflare-workers","vite","vite-plugin"],"created_at":"2024-08-01T19:00:57.413Z","updated_at":"2025-03-15T11:32:53.554Z","avatar_url":"https://github.com/yjl9903.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-cloudflare-functions\n\n[![version](https://img.shields.io/npm/v/vite-plugin-cloudflare-functions?color=rgb%2850%2C203%2C86%29\u0026label=npm)](https://www.npmjs.com/package/vite-plugin-cloudflare-functions) [![CI](https://github.com/yjl9903/vite-plugin-cloudflare-functions/actions/workflows/ci.yml/badge.svg)](https://github.com/yjl9903/vite-plugin-cloudflare-functions/actions/workflows/ci.yml) [![miki](https://img.shields.io/endpoint?url=https://pages.onekuma.cn/project/vite-plugin-cloudflare-functions\u0026label=Demo)](https://vite-plugin-cloudflare-functions.pages.dev/)\n\nMake [Cloudflare Pages Functions](https://developers.cloudflare.com/pages/platform/functions/) works with Vite friendly.\n\n## Features\n\nWhen should you use this plugin?\n\n+ If it is not necessary to use a heavy SSR framework like [nuxt](https://nuxt.com)\n+ If your application is a static SPA, but you also want to write several API endpoints\n\nIf you have used some meta SSR framework like [nuxt](https://nuxt.com), there is no need to use this plugin. But if you want to add some API endpoints to your SPA, just use it.\n\nThis plugin provides some simple utilities to help you develop a SPA with serverless API endpoints powered by [Cloudflare Pages Functions](https://developers.cloudflare.com/pages/platform/functions/).\n\n+ **Dev**: Automatically start wrangler pages dev server\n+ **Dev**: Automatically generate serverless functions API type declaration\n+ **Build**: Automatically move the functions source directory for monorepo\n\n## Installation\n\n```bash\nnpm i -D vite-plugin-cloudflare-functions\n```\n\n```ts\n// vite.config.ts\n\nimport { defineConfig } from 'vite';\n\nimport CloudflarePagesFunctions from 'vite-plugin-cloudflare-functions';\n\nexport default defineConfig({\n  plugins: [\n    CloudflarePagesFunctions()\n  ]\n});\n```\n\n## Usage\n\n### Functions\n\nJust write pages functions as usual, but you can use the following utility functions to make auto-generation and IDE type inference work.\n\n+ `makePagesFunction`\n+ `makeRawPagesFunction`\n+ `makeResponse`: create a [Response](https://developers.cloudflare.com/workers/runtime-apis/response/) using your JSON object\n+ `makeRawResponse`: same with [new Response(...)](https://developers.cloudflare.com/workers/runtime-apis/response/) but wrapped with a generic type used for type inference\n\n```ts\n// /api/[msg].ts\n\nimport {\n  makeRawPagesFunction,\n  makePagesFunction,\n  makeResponse\n} from 'vite-plugin-cloudflare-functions/worker';\n\nexport const onRequestGet = makePagesFunction(({ params }) =\u003e ({\n  status: 'OK',\n  data: 'Hello, ' + params.msg + '!'\n}));\n\nexport const onRequestPost = makeRawPagesFunction(({ params }) =\u003e\n  makeResponse({\n    status: 'OK',\n    data: 'Post ' + params.msg + ' OK!'\n  })\n);\n```\n\n#### Override environment\n\nFor example, you have set the environment variable `PASS` (you can config it in the plugin option, see [Configuration](#configuration)).\n\n```ts\n// cloudflare.d.ts\n\n/// \u003creference types=\"@cloudflare/workers-types\" /\u003e\n/// \u003creference types=\"vite-plugin-cloudflare-functions/types\" /\u003e\n\nimport 'vite-plugin-cloudflare-functions/worker';\n\ndeclare module 'vite-plugin-cloudflare-functions/worker' {\n  interface PagesFunctionEnv {\n    PASS: string;\n  }\n\n  interface PagesFunctionData {}\n}\n```\n\nThen you can find the parameter `env` has corresponding type declarations.\n\n```ts\n// /api/index.ts\n\nimport { makePagesFunction } from 'vite-plugin-cloudflare-functions/worker';\n\nexport const onRequestGet = makePagesFunction(({ env }) =\u003e ({\n  pass: env.PASS\n}));\n```\n\n### Client\n\nJust write you client code as usual, but for we generate the API endpoint response body type declarations automatically, so that with the provided client `useFunctions` (powered by [axios](https://github.com/axios/axios)), your IDE will provide smarter IntelliSense.\n\n```ts\n// /main.ts\nimport { useFunctions } from 'vite-plugin-cloudflare-functions/client';\n\nconst client = useFunctions();\n\nclient.get('/api/world').then((resp) =\u003e {\n  // The type of resp is { status: string, data: string }\n});\n```\n\nFull example is [here](./playground/).\n\n## Configuration\n\n```ts\n// vite.config.ts\n\nimport { defineConfig } from 'vite';\n\nimport CloudflarePagesFunctions from 'vite-plugin-cloudflare-functions';\n\nexport default defineConfig({\n  plugins: [\n    CloudflarePagesFunctions({\n      // Cloudflare Functions root directory\n      root: './functions',\n      // Copy the functions directory to outDir or do nothing\n      outDir: undefined,\n      // Generate API type declarations\n      dts: './cloudflare.d.ts',\n      // Wrangler configuration\n      wrangler: {\n        // Wrangler dev server port\n        port: 8788,\n        // Enable wrangler log\n        log: true,\n        // Bind variable/secret\n        binding: {\n          KEY: 'VALUE'\n        },\n        // Bind KV namespace\n        kv: [\n          'NAMESPACE'\n        ],\n        // Bind D1 database \n        d1: [\n          'D1'\n        ],\n        // Bind Durable Object\n        do: {\n          DO: 'DO'\n        },\n        // Bind R2 bucket\n        r2: [\n          'BUCKET'\n        ],\n        // Bind Workers AI\n        ai: [\n          'AI'\n        ]\n      }\n    })\n  ]\n});\n```\n\n\u003e **Note**\n\u003e\n\u003e **This plugin starts the wrangler pages dev server under the hood**. The configuration field `binding`, `kv`, `do`, `d1`, `r2`, `ai` are passed to run the command `wrangler pages dev` to start pages dev server. You can find more information about this command at [Commands - Cloudflare Worker docs](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1).\n\u003e\n\u003e The generated command of the above example is `wrangler pages dev --local --ip localhost --port 8788 --proxy \u003cgenerated by vite dev server\u003e --binding KEY=VALUE --kv NAMESPACE --d1 D1 --do DO=DO --r2 BUCKET --ai AI`.\n\n## License\n\nMIT License © 2022 [XLor](https://github.com/yjl9903)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjl9903%2Fvite-plugin-cloudflare-functions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyjl9903%2Fvite-plugin-cloudflare-functions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyjl9903%2Fvite-plugin-cloudflare-functions/lists"}