Skip to main content

React Router (Remix) Adapter

React Router integrates seamlessly with EdgeStore, enabling you to build type-safe, full-stack React applications with robust file management capabilities.

Setup​

Install​

Let's start by installing the required packages.

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

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 secrets keys to your repository.

Backend​

In your Remix application, create an API route for EdgeStore with the following content:

app/routes/api/edgestore.ts
ts
import { initEdgeStore } from '@edgestore/server';
import { createEdgeStoreRemixHandler } from '@edgestore/server/adapters/remix';
const es = initEdgeStore.create();
const edgeStoreRouter = es.router({
  publicFiles: es.fileBucket(),
});
export type EdgeStoreRouter = typeof edgeStoreRouter;
const handler = createEdgeStoreRemixHandler({
  router: edgeStoreRouter,
});
export { handler as loader, handler as action };

Add the EdgeStore API route to your routes file.

app/routes.ts
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;

Frontend​

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

app/lib/edgestore.ts
tsx
import { createEdgeStoreProvider } from '@edgestore/react';
import { type EdgeStoreRouter } from '~/routes/api/edgestore';
const { EdgeStoreProvider, useEdgeStore } =
  createEdgeStoreProvider<EdgeStoreRouter>();
export { EdgeStoreProvider, useEdgeStore };

And then wrap your app with the provider in your root component.

app/root.tsx
tsx
import { EdgeStoreProvider } from '~/lib/edgestore';
// ...
export default function App() {
  return (
    <EdgeStoreProvider>
      <Outlet />
    </EdgeStoreProvider>
  );
}

Usage​

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