Fastify Adapter
Some applications are built with React on the frontend (e.g. using create-react-app
or vite
) and have a fastify
backend.
You can use EdgeStore in these cases, even without using Next.js.
Setup
Install
Let's start by installing the required packages.
- npm
- pnpm
- bun
- yarn
shell
npm install @edgestore/server @edgestore/react zod
shell
pnpm add @edgestore/server @edgestore/react zod
shell
bun add @edgestore/server @edgestore/react zod
shell
yarn add @edgestore/server @edgestore/react zod
Environment Variables
Then go to your Dashboard, create a new project and copy the keys to your environment variables.
.envshell
EDGE_STORE_ACCESS_KEY=your-access-keyEDGE_STORE_SECRET_KEY=your-secret-key
Make sure you add .env
to your .gitignore
file.
You don't want to commit your secret keys to your repository.
Backend
Now we can create the backend code in our Fastify app.
The example below is the simplest bucket you can create with EdgeStore. Just a simple file bucket with no validation that will be accessible by anyone with the link.
You can have multiple buckets in your app, each with its own configuration.
ts
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';// --- FASTIFY CONFIG ---const PORT = process.env.PORT ?? 3001;const app = fastify();/*** Your fastify app is probably running in a different port than your frontend app.* To avoid CORS issues, we should use the cors plugin.*/await app.register(cors, {credentials: true,origin: true,});/*** EdgeStore uses cookies to store the context token.* We need to use the cookie plugin to parse the cookies.*/await app.register(cookie);// --- EDGESTORE ROUTER CONFIG ---const es = initEdgeStore.create();const edgeStoreRouter = es.router({publicFiles: es.fileBucket(),});export type EdgeStoreRouter = typeof edgeStoreRouter;const handler = createEdgeStoreFastifyHandler({router: edgeStoreRouter,});// --- FASTIFY ROUTES ---app.get('/', (request, reply) => {console.log('Request received');reply.send('Hello from server!');});// set the get and post routes for the edgestore routerapp.get('/edgestore/*', handler);app.post('/edgestore/*', handler);app.listen({ port: PORT }, (err) => {if (err) {console.error(err);process.exit(1);}console.log(`⚡Server is running here 👉 http://localhost:${PORT}`);});
Frontend
Now let's initiate our context provider in the frontend app.
src/lib/edgestore.tstsx
// You can import it from the other project if it's just the typeimport { type EdgeStoreRouter } from '../../../path/to/fastify-backend/src';import { createEdgeStoreProvider } from '@edgestore/react';const { EdgeStoreProvider, useEdgeStore } =createEdgeStoreProvider<EdgeStoreRouter>();export { EdgeStoreProvider, useEdgeStore };
And then wrap our app with the provider.
src/App.tsxtsx
import { EdgeStoreProvider } from '../lib/edgestore';function App() {return (<EdgeStoreProvider basePath="http://localhost:3001/edgestore">{/* Rest of your app */}</EdgeStoreProvider>);}
Usage
To upload or use the other functionalities of EdgeStore, you can look at the main Quick Start guide. The usage should be the same.
Limitations
For EdgeStore to work properly in your deployed production app, your frontend and backend should be in the same domain.
If you are deploying to Vercel, you can take a look at the Rewrites settings. In case you are using Apache or Nginx, you can set up a reverse proxy to make sure your frontend and backend are in the same domain.