How to Deploy Full-Stack Vite Apps to Cloudflare Using Void

Building full-stack applications with modern toolchains like Vite often requires stitching together server routes, databases, local development loops, and deployment pipelines. The open-source Void toolchain—comprising the Void Platform, Void SDK, and Void CLI—unifies these requirements into a single workflow that integrates directly with Cloudflare.

This guide explains how to install the toolchain, configure a Vite project with the SDK, and deploy your application to Cloudflare or a self-hosted Void Platform.

Prerequisites and Initial Setup

To deploy applications using the Void CLI and SDK, you need a Cloudflare account. If you plan to self-host the Void Platform to manage team deployments, your infrastructure must also include:

• A Cloudflare account with Workers for Platforms and R2 enabled
• A PostgreSQL database
• An account with your chosen login provider
• A domain designated for your hosted applications

To install the open-source platform, fork the repository, configure your environment variables, and run the platform setup. Once the platform is active, users can connect to it via the Void CLI using a connection command such as:

void connect https://api.orange-company.dev

Configuring the Void SDK in a Vite Project

The Void SDK transforms a standard Vite project into a full-stack Cloudflare Workers application, handling tasks like framework detection, resource provisioning, and authentication. To begin, install the package via npm:

npm install void

Next, register the Void plugins inside your Vite configuration file:

import { defineConfig } from "vite";
import { voidPlugin } from "void";
import { voidReact } from "@void/react/plugin";

export default defineConfig({
  plugins: [voidPlugin(), voidReact()],
});

The SDK includes built-in adapters for popular UI frameworks, file-based API routing, and end-to-end type safety. For example, you can write server loaders that query a database and pass strictly typed props directly to your UI components:

// pages/blog.server.ts
import { defineHandler, type InferProps } from 'void';
import { db } from 'void/db';
import { posts } from '@schema';

export const loader = defineHandler(async () => ({
  posts: await db.select().from(posts),
}));

export type Props = InferProps<typeof loader>;

// pages/blog.tsx
export default function Blog({ posts }: Props) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    <ul>
  );
}

Deploying Your Application

The Void CLI manages both project deployments and platform administration. It automatically infers resource bindings from your code, applying database migrations and provisioning required infrastructure such as D1 databases or AI bindings during deployment.

When your application is ready, initiate the deployment process by running:

void deploy

During the first execution, the CLI prompts you to authenticate with your Cloudflare account. The tool then builds the application using Vite, provisions the necessary Cloudflare resources, and pushes the production bundle live.

Source

Official announcement or documentation