TanStack Start

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.local

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

Use the app's existing env file, or .env.local for a new app. Keep it gitignored.

Backend

Create the EdgeStore API route:

src/routes/api/edgestore.$.ts

import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreStartHandler } from '@edgestore/server/adapters/start';
import { createFileRoute } from '@tanstack/react-router';

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

export type EdgeStoreRouter = typeof router;

const handler = createEdgeStoreStartHandler({
  router,
});

export const Route = createFileRoute('/api/edgestore/$')({
  server: {
    handlers: {
      GET: handler,
      POST: handler,
    },
  },
});

Frontend

Create the React provider:

src/utils/edgestore.ts

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

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

export { EdgeStoreProvider, useEdgeStore };

Wrap your app with the provider:

src/routes/__root.tsx

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

// ...

function RootComponent() {
  return (
    <EdgeStoreProvider>
      <Outlet />
    </EdgeStoreProvider>
  );
}

Usage

See Quick start for the upload UI.