React Router v7

Ecosystem

Add voidPlugin() next to the React Router v7 Vite plugin to get the SDK's database, storage and deploy features. You don't need a separate Cloudflare adapter.

On this pageSet up the SDK in a React Router v7 project · Use SDK features from loaders and actions · Reach Cloudflare bindings directly when you need them

Setup

Follow these steps in order.

1. Create a new project

Now you will create a new app and open the new app folder.

npm create react-router@latest my-app
cd my-app

Example output: the scaffolder asks a few questions and creates the app folder.

2. Install dependencies

Now you will install the dependencies.

npm install -D void

Example output: npm finishes with added N packages and no errors.

3. Configure vite.config.ts

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import { voidPlugin } from 'void';

export default defineConfig({
  plugins: [
    voidPlugin(), // must come before the framework plugin
    reactRouter(),
  ],
});

4. Deploy

Requires: login to your deploy target

void auth login opens your browser to sign in to Cloudflare or your team's platform. No token goes in your project.

Now you will sign in and deploy the app.

void auth login
void deploy

Example output: A browser window opens. The CLI confirms the sign-in when you finish. Build and upload progress, then the live URL.

Use SDK features

Most SDK platform features work with React Router. Use them in loaders and actions:

Framework mode does not support SDK-managed auth yet. Use Better Auth's official React Router integration for now.

Database

import { users } from '@schema';
import { db } from 'void/db';
import type { Route } from './+types/users';

export async function loader({}: Route.LoaderArgs) {
  return { users: await db.select().from(users) };
}

Other resources

Use KV, object storage and AI in server-side code. The imports are the same as in an SDK app. Add cron jobs in crons/ and queue consumers in queues/.

Environment variables

Declare variables in env.ts. Read them with import { env } from "void/env". See Environment Variables for local values, production secrets and public VITE_* values.

Read server secrets in a .server.ts companion module and import it into your loader or action. The SDK rejects server-secret reads in route files that also contain browser components.

Access bindings directly

You can also read Cloudflare bindings from the cloudflare:workers module:

import { env } from 'cloudflare:workers';

const { results } = await env.DB.prepare('SELECT * FROM users').all();

Next steps

NextAstroPreviousTanStack StartZoneAll Ecosystem pages