Integration with Expo

Starting from Expo SDK 50, and App Router v3, Expo allows us to create API route directly in an Expo app.

1. Create an Expo app if it doesn't exist with:

bun create expo-app --template tabs

2. Create app/[...slugs]+api.ts
3. In [...slugs]+api.ts, create or import an existing Elysia server
4. Export the handler with the name of method you want to expose

// app/[...slugs]+api.ts
import { Elysia, t } from 'elysia'

const app = new Elysia()
    .get('/', () => 'hello Next')
    .post('/', ({ body }) => body, {
        body: t.Object({
            name: t.String()
        })
    })

export const GET = app.handle 
export const POST = app.handle 

Elysia will work normally as expected because of WinterCG compliance, however, some plugins like Elysia Static may not work if you are running Expo on Node.

You can treat the Elysia server as if normal Expo API route.

With this approach, you can have co-location of both frontend and backend in a single repository and have End-to-end type safety with Eden with both client-side and server action.

Please refer to API route for more information.

Prefix

If you place an Elysia server not in the root directory of the app router, you need to annotate the prefix to the Elysia server.

For example, if you place Elysia server in app/api/[...slugs]+api.ts, you need to annotate prefix as /api to Elysia server.

// app/api/[...slugs]+api.ts
import { Elysia, t } from 'elysia'

const app = new Elysia({ prefix: '/api' })
    .get('/', () => 'hi')
    .post('/', ({ body }) => body, {
        body: t.Object({
            name: t.String()
        })
    })

export const GET = app.handle
export const POST = app.handle

This will ensure that Elysia routing will work properly in any location you place it in.

Deployment

You can either directly use API route using Elysia and deploy as normal Elysia app normally if need or using experimental Expo server runtime.

If you are using Expo server runtime, you may use expo export command to create optimized build for your expo app, this will include an Expo function which is using Elysia at dist/server/_expo/functions/[...slugs]+api.js

TIP

Please note that Expo Functions are treated as Edge functions instead of normal server, so running the Edge function directly will not allocate any port.

You may use the Expo function adapter provided by Expo to deploy your Edge Function.

Currently Expo support the following adapter:

• Express
• Netlify
• Vercel