Express

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

This example uses Express 5. Keep your existing middleware and load the backend env file before constructing the provider; Express does not load it automatically.

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

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreExpressHandler } from '@edgestore/server/adapters/express';
import cookieParser from 'cookie-parser';
import cors from 'cors';
import express from 'express';

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

const app = express();

app.use(
  cors({
    // Replace with your frontend origin.
    origin: 'http://localhost:5173',
    credentials: true,
  }),
);
app.use(cookieParser());
app.use(express.json());

const es = initEdgeStore.create();

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

export type EdgeStoreRouter = typeof router;

const handler = createEdgeStoreExpressHandler({
  router,
});

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

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Express 5 requires a named wildcard. On Express 4, use /edgestore/* instead. See Express 5 route syntax.

Frontend

Create the React provider:

src/lib/edgestore.ts

// Import the router type from your backend.
import type { EdgeStoreRouter } from '../../../path/to/express-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.