Hono

Setup

Install

Install @edgestore/server in the backend and @edgestore/react in the frontend.

npm install @edgestore/server@rc @edgestore/react@rc

Environment variables

Copy your project's keys from the dashboard to the backend env file:

.env.local (backend only)

EDGESTORE_ACCESS_KEY=your-access-key
EDGESTORE_SECRET_KEY=your-secret-key

Load the env file in the backend before creating the provider, and keep it gitignored. The Hono example loads .env.local in its dev command.

Backend

This bucket's files are accessible to anyone with the link.

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreHonoHandler } from '@edgestore/server/adapters/hono';
import { serve } from '@hono/node-server';
import { Hono } from 'hono';
import { cors } from 'hono/cors';

const PORT = process.env.PORT ?? 3001;
const frontendOrigin = process.env.FRONTEND_ORIGIN ?? 'http://localhost:5173';
const app = new Hono();

app.use(
  '/edgestore/*',
  cors({
    origin: frontendOrigin,
    credentials: true,
  }),
);

const es = initEdgeStore.create();

const router = es.router({
  publicFiles: es.fileBucket(),
});

export type EdgeStoreRouter = typeof router;

const handler = createEdgeStoreHonoHandler({
  router,
});

app.all('/edgestore/*', handler);

serve(
  {
    fetch: app.fetch,
    port: Number(PORT),
  },
  (info) => {
    console.log(`Server running at http://localhost:${info.port}`);
  },
);

Frontend

Create the React provider:

src/lib/edgestore.ts

// Import the router type from your backend.
import { type EdgeStoreRouter } from '../../../path/to/hono-backend/src';
import { createEdgeStoreProvider } from '@edgestore/react';

const { EdgeStoreProvider, useEdgeStore } =
  createEdgeStoreProvider<EdgeStoreRouter>();

export { EdgeStoreProvider, useEdgeStore };

Wrap your app with the provider:

src/App.tsx

import { EdgeStoreProvider } from '../lib/edgestore';

function App() {
  return (
    <EdgeStoreProvider basePath={import.meta.env.VITE_EDGESTORE_BASE_PATH ?? '/edgestore'}>
      {/* Rest of your app */}
    </EdgeStoreProvider>
  );
}

For separate Vite and Hono dev servers, set these values to match your ports:

Frontend: VITE_EDGESTORE_BASE_PATH=http://localhost:3001/edgestore
Backend: FRONTEND_ORIGIN=http://localhost:5173

Across repositories, share the backend router's type through a package.

Usage

See Quick start for the upload UI.

Limitations

In production, serve the frontend and backend on the same domain. Use Vercel rewrites or a reverse proxy.