[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

[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<ExpoResponse> {
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 <[email protected]>
Co-authored-by: Cedric van Putten <[email protected]>

show more ...

Move `process.env` polyfill strip to `expo/metro-config`. (#24455)

# Why

Improves the sourcemaps as we aren't modifying the string after the maps
are generated.

---------

Co-authored-by: E

Move `process.env` polyfill strip to `expo/metro-config`. (#24455)

# Why

Improves the sourcemaps as we aren't modifying the string after the maps
are generated.

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

[lint] Upgrade to Prettier v3, typescript-eslint to v6 (#23544)

Why
---
Prettier 3 is out. Add support for it with this linter config.

**Note for reviewer:** the first commit is the one with th

[lint] Upgrade to Prettier v3, typescript-eslint to v6 (#23544)

Why
---
Prettier 3 is out. Add support for it with this linter config.

**Note for reviewer:** the first commit is the one with the actual
changes. The rest of this PR are changes to get the linter passing
(mostly autofix).

How
---
Update eslint-config-prettier and eslint-plugin-prettier. To address
deprecation warnings, also update typescript-eslint/parser and
typescript-eslint/eslint-plugin.
Because of an update to typescript-eslint/parser, we need to suppress
deprecation warnings (documented in a comment).

Regenerated test snapshots. Due to the upgraded dependencies, typecasts
and optional chaining are now auto-fixable by lint. This converts
warnings into autofixes.

Test Plan
---
`yarn test` in the linter config. Run `expotools check --all --fix-lint
--no-build --no-test --no-uniformity-check` to try this config on the
whole repo.

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

fix(cli): static render fix with side-effects (#22713)

# Why

Ensure that static rendering bundles with side-effects works as
expected.

---------

Co-authored-by: Expo Bot <34669131+expo-bot

fix(cli): static render fix with side-effects (#22713)

# Why

Ensure that static rendering bundles with side-effects works as
expected.

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

feat(metro-config, cli): CSS serializer (#22325)

# Why

In order to support static CSS in development mode, we need to update
the metro serializer to support returning the JS and CSS assets. We n

feat(metro-config, cli): CSS serializer (#22325)

# Why

In order to support static CSS in development mode, we need to update
the metro serializer to support returning the JS and CSS assets. We now
inline the CSS in the HTML before sending to the client, this allows for
testing how the website works with JS disabled. We use the same style
tag id to continue to support HMR for styles during subsequent updates.

This change also refactors how exports work to serialize JS and CSS at
the same time (i.e. after the native transformations).

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

feat(cli): use LogBox for static Metro errors (#22118)

# Why

Static rendering errors from Metro are hard to use. This PR (in
conjunction with https://github.com/expo/router/pull/491) makes it
p

feat(cli): use LogBox for static Metro errors (#22118)

# Why

Static rendering errors from Metro are hard to use. This PR (in
conjunction with https://github.com/expo/router/pull/491) makes it
possible to use LogBox for all Metro rendering errors.

# Test Plan

<img width="783" alt="Screenshot 2023-04-13 at 1 42 01 PM"
src="https://user-images.githubusercontent.com/9664363/231853560-77062191-47ea-43c4-8f2f-9f366b7e5418.png">
<img width="835" alt="Screenshot 2023-04-13 at 1 42 22 PM"
src="https://user-images.githubusercontent.com/9664363/231853562-48ae2dd7-8aea-46f5-b7d8-f4c222595b21.png">


<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `expo prebuild` & EAS Build (eg:
updated a module plugin).

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

node rendering fixes (#22076)

# Why

- expose environment variables when bundling for node environments.
- add `cjs` to `resolver.sourceExts` without platform extensions to
support common node p

node rendering fixes (#22076)

# Why

- expose environment variables when bundling for node environments.
- add `cjs` to `resolver.sourceExts` without platform extensions to
support common node packages (nanoid specifically).

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

fix(cli): node rendering (#21902)

# Why

fix node rendering

---------

Co-authored-by: Expo Bot <[email protected]>

feat(cli): add node target and externals to Metro (#21886)

# Why

In order to bundle for Node.js targets using Metro (required for React
Server Components and other features), we need to add supp

feat(cli): add node target and externals to Metro (#21886)

# Why

In order to bundle for Node.js targets using Metro (required for React
Server Components and other features), we need to add support for
leaving the Node.js imports in-tact (no first-class support), and the
ability to indicate that we're targeting Node.js without changing the
platform from web.

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

- Use `resolver.environment` and `transform.environment` to partially
invalidate the Metro cache and pass custom options to the transformer
(usage currently unimplemented) and resolver.
- Tap Node.js files in the user project under
`.expo/metro/externals/[module]/index.js` and redirect requests to these
modules when bundling for Node.js environments.
- Tap a polyfill which exposes `$$require_external` on the global.
`$$require_external` can be used to access the environment require from
anywhere in the bundle.
- `$$require_external` asserts when used in the browser or native (where
it shouldn't be available).

<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

- Added unit tests.
- Tested against an Expo Router project.

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `expo prebuild` & EAS Build (eg:
updated a module plugin).

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...

feat(cli): add basic static rendering for router projects (#21572)

# Why

- Implement an experimental static rendering system for Metro websites
using Expo Router.
- Behavior is undocumented and

feat(cli): add basic static rendering for router projects (#21572)

# Why

- Implement an experimental static rendering system for Metro websites
using Expo Router.
- Behavior is undocumented and highly experimental.

<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How

- Add support to `start` and `export` which pre-renders static web pages
to HTML to improve SEO support on web.
- The system implements [React Navigation's
SSR](https://reactnavigation.org/docs/server-rendering) support.
- Head elements can be used with `import { Head } from
'expo-router/head'`.
- The root HTML is not exposed to the user.
- There are no data fetching mechanisms.
- There's no ability to provide a 404 page or other server features.


<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

- e2e test for exporting a router project statically.
- `EXPO_USE_STATIC=1 yarn expo` -> websites are pre-rendered before
being served.
- `EXPO_USE_STATIC=1 yarn expo export -p web` -> static routes are
rendered to static HTML files by the same name (dynamic routes are not
supported).


<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `expo prebuild` & EAS Build (eg:
updated a module plugin).

---------

Co-authored-by: Expo Bot <[email protected]>

show more ...