46f023fa - [RFC] API Routes in Expo Router (#24429)

Fri, 15 Sep 2023 23:04:53 +0000

[RFC] API Routes in Expo Router (#24429)# Why Servers are an important part of developing many different types of apps, but they're much harder to configure than they need to be. API Routes will enable users to express some abstract JavaScript code that runs in a server by simply creating a file in the app directory, and adding the `+api.js` suffix. For example, to securely interact with OpenAI, simply: ```ts // app/generate+api.ts import { ExpoRequest, ExpoResponse } from 'expo-router/server'; export async function POST(req: ExpoRequest): Promise { const { prompt } = await req.json(); const json = await fetch('https://api.openai.com/v1/engines/text-davinci-003/completions', { headers: { 'Content-Type': 'application/json', // `OPENAI_API_KEY` is pulled from the .env file when running in Expo CLI. Authorization: `Bearer ${process.env.OPENAI_API_KEY ?? ''}`, }, method: 'POST', body: JSON.stringify({ prompt, max_tokens: 100, }), }).then(res => res.json()); // Return as JSON return ExpoResponse.json(json); } ``` This will be served at `http://localhost:8081/generate` with `npx expo` and can be used by making a request: ```sh $ curl -X POST -H "Content-Type: application/json" -d \'{"prompt":"Hello, my name is"}\' http://localhost:8081/generate ``` Expo Router polyfills the URL and `window.location` object on native to allow for universally requesting with a relative URL: ```js // Expo prepends the host and port to the URL automatically in development. const json = await fetch('/generate').then(res => res.json()); ``` # How - API Routes are bundled with Metro, leveraging all the same functionality as the rest of the app and website. - The project babel config is used to transpile the API routes. Indication is passed to the Babel caller via the `isServer` boolean. This can be used to change the preset based on the environment. - Each API route is bundled into a standalone file in the `dist/_expo` directory. This is akin to ncc, the tool we use to make Create Expo App download in ~1 second. - Create a new package `@expo/server` which includes the requisite middleware and runtime polyfills for the Expo server environment. - Add a new routes manifest which will be used by `@expo/server` to serve up the three types of routes: HTML routes, API routes, and not found routes (404s). - Add a new export `expo-router/server` (potentially will be moved to `expo/server`) which contains the `ExpoRequest` and `ExpoResponse` objects. These are all based on the WinterCG specification, and include some additional properties for interop with the Expo Router filesystem convention. These are inspired by Remix, SvelteKit, and Next.js for simplicity. - Add a new export mode `web.output: "server"` which can be used to export a dynamic server. Note: I may drop this for now and make server the default since there's no expo-specific hosting code that must be exported. - This PR adds the ability to host the app with an express server, different production adapters to follow. # Test Plan In addition to all the E2E Metro tests, I've added a new E2E runner which starts a server and pings different requests to ensure expected behavior. These run in the CLI as opposed to the `@expo/server` package. - resolve ENG-10057 ENG-8243 ENG-8082 ENG-8079 ENG-8242 ENG-8081 ENG-8080 ENG-9625 --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com> Co-authored-by: Cedric van Putten List of files: /expo/packages/@expo/cli/src/start/server/metro/bundleApiRoutes.ts

Changes in bundleApiRoutes.ts

46f023fa - [RFC] API Routes in Expo Router (#24429)