Fastify

Setup

Install

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

Environment variables

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

.env

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

Add .env to .gitignore.

Backend

Load the backend env file before constructing the provider; Fastify does not load it automatically. Reuse existing cookie and CORS registrations.

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

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreFastifyHandler } from '@edgestore/server/adapters/fastify';
import cors from '@fastify/cors';
import cookie from '@fastify/cookie';
import fastify from 'fastify';

const PORT = process.env.PORT ?? 3001;

const app = fastify();

await app.register(cors, {
  // Replace with your frontend origin.
  origin: 'http://localhost:5173',
  credentials: true,
});

await app.register(cookie);

const es = initEdgeStore.create();

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

export type EdgeStoreRouter = typeof router;

const handler = createEdgeStoreFastifyHandler({
  router,
});

app.get('/edgestore/*', handler);
app.post('/edgestore/*', handler);

app.listen({ port: PORT }, (err) => {
  if (err) {
    console.error(err);
    process.exit(1);
  }
  console.log(`Server running at http://localhost:${PORT}`);
});

Frontend

Create the React provider:

src/lib/edgestore.ts

// Import the router type from your backend.
import type { EdgeStoreRouter } from '../../../path/to/fastify-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="http://localhost:3001/edgestore">
      {/* Rest of your app */}
    </EdgeStoreProvider>
  );
}

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.