Cloudflare Workers + Vite

Vous pouvez créer une application full-stack sur Cloudflare Workers avec Vite en utilisant @cloudflare/vite-plugin. Cette configuration fournit un serveur de développement Vite rapide, le rendu côté serveur avec le moteur JSX de Hono et des scripts côté client regroupés par Vite, le tout sur Cloudflare Workers.

C'est la méthode recommandée pour démarrer un nouveau projet full-stack sur Cloudflare.

1. Configuration

Un modèle de démarrage est disponible pour Cloudflare Workers avec Vite. Créez votre projet avec la commande « create-hono ». Sélectionnez le modèle cloudflare-workers+vite pour cet exemple.

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono my-app

Ouvrez my-app et installez les dépendances.

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

Voici une arborescence de base.

./
├── package.json
├── public // Put your static files here.
├── src
│   ├── index.tsx // The entry point for server-side.
│   ├── renderer.tsx
│   └── style.css
├── tsconfig.json
├── vite.config.ts
└── wrangler.jsonc

Le fichier vite.config.ts combine le plugin Cloudflare avec vite-ssr-components pour le rendu côté serveur :

import { cloudflare } from '@cloudflare/vite-plugin'
import { defineConfig } from 'vite'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [cloudflare(), ssrPlugin()],
})

2. Bonjour le monde

Modifiez src/index.tsx comme suit :

import { Hono } from 'hono'
import { renderer } from './renderer'

const app = new Hono()

app.use(renderer)

app.get('/', (c) => {
  return c.render(<h1>Hello, Cloudflare Workers!</h1>)
})

export default app

Le renderer est défini dans src/renderer.tsx avec le middleware de rendu JSX de Hono et vite-ssr-components, qui connecte le client et les ressources de Vite :

import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, ViteClient } from 'vite-ssr-components/hono'

export const renderer = jsxRenderer(({ children }) => {
  return (
    <html>
      <head>
        <ViteClient />
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
      <body>{children}</body>
    </html>
  )
})

3. Exécution

Démarrez le serveur de développement localement. Ensuite, ouvrez http://localhost:5173 dans votre navigateur web.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

4. Déploiement

Si vous avez un compte Cloudflare, vous pouvez déployer sur Cloudflare. Le script deploy compile avec Vite, puis publie avec Wrangler.

npm

npm run deploy

yarn

yarn deploy

pnpm

pnpm run deploy

bun

bun run deploy

Bindings

Vous pouvez utiliser les bindings Cloudflare, tels que les variables, KV, D1 et autres. Configurez-les dans wrangler.jsonc. Par exemple, pour ajouter une variable nommée MY_NAME :

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-app",
  "compatibility_date": "2025-08-03",
  "main": "./src/index.tsx",
  "vars": {
    "MY_NAME": "Hono",
  },
}

Pour générer les types de vos bindings, exécutez le script cf-typegen :

npm

npm run cf-typegen

yarn

yarn cf-typegen

pnpm

pnpm run cf-typegen

bun

bun run cf-typegen

Il génère une interface CloudflareBindings. Passez-la à Hono comme paramètre générique :

const app = new Hono<{ Bindings: CloudflareBindings }>()

Accédez ensuite aux bindings via c.env :

app.get('/', (c) => {
  return c.render(<h1>Hello! {c.env.MY_NAME}</h1>)
})

Côté client

vite-ssr-components permet de charger des scripts côté client via Vite. Ajoutez un composant Script pointant vers l'entrée du client ; Vite gère le regroupement des fichiers en développement et en production :

import { jsxRenderer } from 'hono/jsx-renderer'
import { Script, ViteClient } from 'vite-ssr-components/hono'

export const renderer = jsxRenderer(({ children }) => {
  return (
    <html>
      <head>
        <ViteClient />
        <Script src='/src/client.ts' />
      </head>
      <body>{children}</body>
    </html>
  )
})

Pour en savoir plus, consultez la documentation de @cloudflare/vite-plugin et vite-ssr-components.