Skip to main content

Hono Adapter

Some applications are built with React on the frontend (e.g. using create-react-app or vite) and have a hono backend.

You can use EdgeStore in these cases, even without using Next.js.

Setup​

Install​

Let's start by installing the required packages.

shell
npm install @edgestore/server @edgestore/react zod hono

Environment Variables​

Then go to your Dashboard, create a new project and copy the keys to your environment variables.

.env
shell
EDGE_STORE_ACCESS_KEY=your-access-key
EDGE_STORE_SECRET_KEY=your-secret-key
caution

Make sure you add .env to your .gitignore file.
You don't want to commit your secret keys to your repository.

Backend​

Now we can create the backend code in our Hono app.

The example below is the simplest bucket you can create with EdgeStore. Just a simple file bucket with no validation that will be accessible by anyone with the link.

You can have multiple buckets in your app, each with its own configuration.

ts
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';
// --- HONO CONFIG ---
const PORT = process.env.PORT ?? 3001;
const app = new Hono();
/**
 * Your Hono app is probably running in a different port than your frontend app.
 * To avoid CORS issues, we should use the cors middleware.
 */
app.use(
  '*',
  cors({
    // Change this to your frontend origin for better security
    origin: (origin) => origin,
    credentials: true,
  }),
);
// --- EDGESTORE ROUTER CONFIG ---
const es = initEdgeStore.create();
const edgeStoreRouter = es.router({
  publicFiles: es.fileBucket(),
});
export type EdgeStoreRouter = typeof edgeStoreRouter;
const handler = createEdgeStoreHonoHandler({
  router: edgeStoreRouter,
});
// --- HONO ROUTES ---
app.get('/', (c) => {
  return c.text('Hello from Hono server!');
});
// Route for EdgeStore
app.all('/edgestore/*', handler);
// Start the server
serve(
  {
    fetch: app.fetch,
    port: Number(PORT),
  },
  (info) => {
    console.log(`⚡Server is running here 👉 http://localhost:${info.port}`);
  },
);

Frontend​

Now let's initiate our context provider in the frontend app.

src/lib/edgestore.ts
tsx
// You can import it from the other project if it's just the type
import { type EdgeStoreRouter } from '../../../path/to/hono-backend/src';
import { createEdgeStoreProvider } from '@edgestore/react';
const { EdgeStoreProvider, useEdgeStore } =
  createEdgeStoreProvider<EdgeStoreRouter>();
export { EdgeStoreProvider, useEdgeStore };

And then wrap our app with the provider.

src/App.tsx
tsx
import { EdgeStoreProvider } from '../lib/edgestore';
function App() {
  return (
    <EdgeStoreProvider basePath="http://localhost:3001/edgestore">
      {/* Rest of your app */}
    </EdgeStoreProvider>
  );
}

Usage​

To upload or use the other functionalities of EdgeStore, you can look at the main Quick Start guide. The usage should be the same.

Limitations​

caution

For EdgeStore to work properly in your deployed production app, your frontend and backend should be in the same domain.

If you are deploying to Vercel, you can take a look at the Rewrites settings. In case you are using Apache or Nginx, you can set up a reverse proxy to make sure your frontend and backend are in the same domain.