Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@nurupo/vite-plugin-cloudflare-functions
Advanced tools
Make Cloudflare Pages Functions works with Vite friendly
Make Cloudflare Pages Functions works with Vite friendly.
When should you use this plugin?
If you have used some meta SSR framework like nuxt, there is no need to use this plugin. But if you want to add some API endpoints to your SPA, just use it.
This plugin provides some simple utilities to help you develop a SPA with serverless API endpoints powered by Cloudflare Pages Functions.
npm i -D vite-plugin-cloudflare-functions
// vite.config.ts
import { defineConfig } from 'vite';
import CloudflarePagesFunctions from 'vite-plugin-cloudflare-functions';
export default defineConfig({
plugins: [
CloudflarePagesFunctions()
]
});
Just write pages functions as usual, but you can use the following utility functions to make auto-generation and IDE type inference work.
makePagesFunction
makeRawPagesFunction
makeResponse
: create a Response using your JSON objectmakeRawResponse
: same with new Response(...) but wrapped with a generic type used for type inference// /api/[msg].ts
import {
makeRawPagesFunction,
makePagesFunction,
makeResponse
} from 'vite-plugin-cloudflare-functions/worker';
export const onRequestGet = makePagesFunction(({ params }) => ({
status: 'OK',
data: 'Hello, ' + params.msg + '!'
}));
export const onRequestPost = makeRawPagesFunction(({ params }) =>
makeResponse({
status: 'OK',
data: 'Post ' + params.msg + ' OK!'
})
);
For example, you have set the environment variable PASS
(you can config it in the plugin option, see Configuration).
// cloudflare.d.ts
/// <reference types="@cloudflare/workers-types" />
/// <reference types="vite-plugin-cloudflare-functions/types" />
import 'vite-plugin-cloudflare-functions/worker';
declare module 'vite-plugin-cloudflare-functions/worker' {
interface PagesFunctionEnv {
PASS: string;
}
interface PagesFunctionData {}
}
Then you can find the parameter env
has corresponding type declarations.
// /api/index.ts
import { makePagesFunction } from 'vite-plugin-cloudflare-functions/worker';
export const onRequestGet = makePagesFunction(({ env }) => ({
pass: env.PASS
}));
Just 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), your IDE will provide smarter IntelliSense.
// /main.ts
import { useFunctions } from 'vite-plugin-cloudflare-functions/client';
const client = useFunctions();
client.get('/api/world').then((resp) => {
// The type of resp is { status: string, data: string }
});
Full example is here.
// vite.config.ts
import { defineConfig } from 'vite';
import CloudflarePagesFunctions from 'vite-plugin-cloudflare-functions';
export default defineConfig({
plugins: [
CloudflarePagesFunctions({
// Cloudflare Functions root directory
root: './functions',
// Copy the functions directory to outDir or do nothing
outDir: undefined,
// Generate API type declarations
dts: './cloudflare.d.ts',
// Wrangler configuration
wrangler: {
// Wrangler dev server port
port: 8788,
// Enable wrangler log
log: true,
// Bind variable/secret
binding: {
KEY: 'VALUE'
},
// Bind KV namespace
kv: [
'NAMESPACE'
],
// Bind D1 database
d1: [
'D1'
],
// Bind Durable Object
do: {
DO: 'DO'
},
// Bind R2 bucket
r2: [
'BUCKET'
]
}
})
]
});
Note
This plugin starts the wrangler pages dev server under the hood. The configuration field
binding
,kv
,do
,d1
,r2
are passed to run the commandwrangler pages dev
to start pages dev server. You can find more information about this command at Commands - Cloudflare Worker docs.The generated command of the above example is
wrangler pages dev --local --ip localhost --port 8788 --proxy <generated by vite dev server> --binding KEY=VALUE --kv NAMESPACE --d1 D1 --do DO=DO --r2 BUCKET
.
MIT License © 2022 XLor
FAQs
Make Cloudflare Pages Functions works with Vite friendly
We found that @nurupo/vite-plugin-cloudflare-functions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.