You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/integrations/expo.md
+78-23Lines changed: 78 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,62 +18,117 @@ head:
18
18
19
19
Starting from Expo SDK 50, and App Router v3, Expo allows us to create API route directly in an Expo app.
20
20
21
-
1. Create an Expo app if it doesn't exist with:
22
-
```typescript
23
-
buncreateexpo-app--templatetabs
24
-
```
21
+
1. Create **app/[...slugs]+api.ts**
22
+
2. Define an Elysia server
23
+
3. Export **Elysia.fetch** name of HTTP methods you want to use
25
24
26
-
2. Create **app/[...slugs]+api.ts**
27
-
3. In **[...slugs]+api.ts**, create or import an existing Elysia server
28
-
4. Export the handler with the name of method you want to expose
25
+
::: code-group
29
26
30
-
```typescript
31
-
// app/[...slugs]+api.ts
27
+
```typescript [app/[...slugs]+api.ts]
32
28
import { Elysia, t } from'elysia'
33
29
34
30
const app =newElysia()
35
-
.get('/', () =>'hello Next')
31
+
.get('/', 'hello Expo')
36
32
.post('/', ({ body }) =>body, {
37
33
body: t.Object({
38
34
name: t.String()
39
35
})
40
36
})
41
37
42
-
exportconst GET =app.handle// [!code ++]
43
-
exportconst POST =app.handle// [!code ++]
38
+
exportconst GET =app.fetch// [!code ++]
39
+
exportconst POST =app.fetch// [!code ++]
44
40
```
45
41
46
-
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.
42
+
:::
47
43
48
44
You can treat the Elysia server as if normal Expo API route.
49
45
50
-
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](https://elysiajs.com/eden/overview.html) with both client-side and server action.
51
-
52
-
Please refer to [API route](https://docs.expo.dev/router/reference/api-routes/) for more information.
53
-
54
46
## Prefix
55
47
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.
56
48
57
49
For example, if you place Elysia server in **app/api/[...slugs]+api.ts**, you need to annotate prefix as **/api** to Elysia server.
This will ensure that Elysia routing will work properly in any location you place it in.
76
71
72
+
## Eden
73
+
74
+
We can add [Eden](/eden/overview) for **end-to-end type safety** similar to tRPC.
75
+
76
+
1. Export `type` from the Elysia server
77
+
78
+
::: code-group
79
+
80
+
```typescript [app/[...slugs]+api.ts]
81
+
import { Elysia } from'elysia'
82
+
83
+
const app =newElysia()
84
+
.get('/', 'Hello Nextjs')
85
+
.post(
86
+
'/user',
87
+
({ body }) =>body,
88
+
{
89
+
body: treaty.schema('User', {
90
+
name: 'string'
91
+
})
92
+
}
93
+
)
94
+
95
+
exporttypeapp=typeofapp// [!code ++]
96
+
97
+
exportconst GET =app.fetch
98
+
exportconst POST =app.fetch
99
+
```
100
+
101
+
:::
102
+
103
+
2. Create a Treaty client
104
+
105
+
::: code-group
106
+
107
+
```typescript [lib/eden.ts]
108
+
import { treaty } from'@elysiajs/eden'
109
+
importtype { app } from'../app/[...slugs]+api'
110
+
111
+
exportconst api =treaty<app>('localhost:3000/api')
112
+
```
113
+
114
+
:::
115
+
116
+
3. Use the client in both server and client components
117
+
118
+
::: code-group
119
+
120
+
```tsx [app/page.tsx]
121
+
import { api } from'../lib/eden'
122
+
123
+
exportdefaultasyncfunction Page() {
124
+
const message =awaitapi.get()
125
+
126
+
return <h1>Hello, {message}</h1>
127
+
}
128
+
```
129
+
130
+
:::
131
+
77
132
## Deployment
78
133
You can either directly use API route using Elysia and deploy as normal Elysia app normally if need or using [experimental Expo server runtime](https://docs.expo.dev/router/reference/api-routes/#deployment).
2. In **route.ts**, create or import an existing Elysia server
23
-
3. Export HTTP methods you want to use with `Elysia.handle`
21
+
1. Create **app/api/[[...slugs]]/route.ts**
22
+
2. define an Elysia server
23
+
3. Export **Elysia.fetch** name of HTTP methods you want to use
24
+
25
+
::: code-group
24
26
25
27
```typescript [app/api/[[...slugs]]/route.ts]
26
-
// app/api/[[...slugs]]/route.ts
27
28
import { Elysia, t } from'elysia'
28
29
29
30
const app =newElysia({ prefix: '/api' })
30
-
.get('/', () =>'hello Next')
31
+
.get('/', 'Hello Nextjs')
31
32
.post('/', ({ body }) =>body, {
32
33
body: t.Object({
33
34
name: t.String()
34
35
})
35
36
})
36
37
37
-
exportconst GET =app.handle
38
-
exportconst POST =app.handle
38
+
exportconst GET =app.fetch// [!code ++]
39
+
exportconst POST =app.fetch// [!code ++]
39
40
```
40
41
41
-
Elysia will work normally as expected because of WinterCG compliance, however, some plugins like **Elysia Static** may not work if you are running Next.js on Node.
42
+
:::
42
43
43
-
You can treat the Elysia server as a normal Next.js API route.
44
+
Elysia will work normally as expected because of WinterCG compliance.
44
45
45
-
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](https://elysiajs.com/eden/overview.html) with both client-side and server action
46
+
You can treat the Elysia server as a normal Next.js API route.
46
47
47
-
Please refer to [Next.js Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#static-route-handlers) for more information.
48
+
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](/eden/overview) with both client-side and server action
48
49
49
50
## Prefix
50
51
51
52
Because our Elysia server is not in the root directory of the app router, you need to annotate the prefix to the Elysia server.
52
53
53
54
For example, if you place Elysia server in **app/user/[[...slugs]]/route.ts**, you need to annotate prefix as **/user** to Elysia server.
exportconst api =treaty<app>('localhost:3000/api')
117
+
```
118
+
119
+
:::
120
+
121
+
3. Use the client in both server and client components
122
+
123
+
::: code-group
124
+
125
+
```tsx [app/page.tsx]
126
+
import { api } from'../lib/eden'
127
+
128
+
exportdefaultasyncfunction Page() {
129
+
const message =awaitapi.get()
130
+
131
+
return <h1>Hello, {message}</h1>
132
+
}
133
+
```
134
+
135
+
:::
136
+
137
+
Please refer to [Next.js Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#static-route-handlers) for more information.
You can treat the Elysia server as a normal SvelteKit server route.
46
45
47
-
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](https://elysiajs.com/eden/overview.html) with both client-side and server action
48
-
49
-
Please refer to [SvelteKit Routing](https://kit.svelte.dev/docs/routing#server) for more information.
50
-
51
46
## Prefix
52
47
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.
0 commit comments