Remix / React Router

Use the Remix adapter with Remix or React Router framework mode. A client-only React Router application needs a separate backend; this route runs on the server.

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

Create the EdgeStore API route:

app/routes/api/edgestore.ts

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreRemixHandler } from '@edgestore/server/adapters/remix';

const es = initEdgeStore.create();

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

export type EdgeStoreRouter = typeof router;

const handler = createEdgeStoreRemixHandler({
  router,
});

export { handler as loader, handler as action };

For React Router framework mode, add the endpoint to your existing routes file:

app/routes.ts

import { index, route, type RouteConfig } from '@react-router/dev/routes';

export default [
  index('routes/home.tsx'),
  route('api/edgestore/*', 'routes/api/edgestore.ts'),
] satisfies RouteConfig;

For Remix v2's default file-based routing, put the same handler in app/routes/api.edgestore.$.ts instead. For custom routing, see Remix route conventions and React Router routing.

Frontend

Create the React provider:

app/lib/edgestore.ts

import { createEdgeStoreProvider } from '@edgestore/react';
import type { EdgeStoreRouter } from '~/routes/api/edgestore';

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

export { EdgeStoreProvider, useEdgeStore };

Point the type-only import at your actual route module; for the Remix filename above, use ~/routes/api.edgestore.$.

Wrap the root component with the provider:

app/root.tsx

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

// ...

export default function App() {
  return (
    <EdgeStoreProvider>
      <Outlet />
    </EdgeStoreProvider>
  );
}

Usage

See Quick start for the upload UI.