[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 ...

feat(cli, router, metro, asset): add basePath support (#23911)

# Why

- Add the ability to export websites for hosting from a custom path.
This is required for GitHub pages.
- Resolve ENG-9193

feat(cli, router, metro, asset): add basePath support (#23911)

# Why

- Add the ability to export websites for hosting from a custom path.
This is required for GitHub pages.
- Resolve ENG-9193
- Resolve https://github.com/expo/expo/issues/20562
- Resolve https://github.com/expo/router/issues/165

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

# How

- Add `expo.experiments.basePath` which can be used during `npx expo
export` to modify how assets are referenced.
- Set the `publicPath` in Metro to output as expected.
- Add custom asset writing for web to support stripping the unused
prefix.

- It's unclear if this should also apply to native, and if we should
have platform-specific variations.
- Update Expo Router to support automatically adjusting paths to support
basePath in production builds.
<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

- [ ] New `expo export` test.

<!--
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]>
Co-authored-by: Aman Mittal <[email protected]>

show more ...

chore: improve expo router testing (#23795)

# Why

- Ensure the various aspects of `npx expo export` continue to work with
the latest Expo Router/Metro depdencies.
- We had a bundling testing fo

chore: improve expo router testing (#23795)

# Why

- Ensure the various aspects of `npx expo export` continue to work with
the latest Expo Router/Metro depdencies.
- We had a bundling testing for Expo Router but it wasn't linked to the
monorepo so the dependencies weren't in sync.

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

# How

- Create a new app in `apps/` which is synchronized with the monorepo.
- This app contains multiple expo-router directories and various dynamic
settings.
- Fold the `expo-router` e2e tests into `@expo/cli`.
- Test static rendering, single-page application exporting, and the
native url polyfill (api).

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

# Test Plan

- The CLI E2E tests should pass.

---------

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

show more ...

test(cli): Update E2E tests to expect hbc bundles (#23241)

# Why


`CLI / Test` actions are failing on main because E2E tests are expecting
`.js` bundles instead of `.hbc`


# How

Update

test(cli): Update E2E tests to expect hbc bundles (#23241)

# Why


`CLI / Test` actions are failing on main because E2E tests are expecting
`.js` bundles instead of `.hbc`


# How

Update E2E tests to expect `.hbc` bundles instead of `.js`

# Test Plan

Ensure CI is green


# 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).

show more ...

[cli][packages] unify the default dev server port to 8081 (#22880)

# Why

for historical reasons, when running `npx expo start` the dev-server listens to port 19000, and running `npx expo start --

[cli][packages] unify the default dev server port to 8081 (#22880)

# Why

for historical reasons, when running `npx expo start` the dev-server listens to port 19000, and running `npx expo start --dev-client` it listens to port 8081. since we are now on our effort to deprecate `--dev-client` option, it is better to unify the listening port.
close ENG-8936

# How

- update packages/**/*.ts for port 19000 -> 8081
- search more occurrences for 19000 to 8081

# Test Plan

- ci passed
- bare-expo
- unversioned expo go + ncl

show more ...

feat(cli): Add `--no-minify` flag to `npx expo export` to prevent minifying output JavaScript. (#22544)

# Why

Nice feature to have for debugging.

# How

- Add the `--no-minify` flag to `npx

feat(cli): Add `--no-minify` flag to `npx expo export` to prevent minifying output JavaScript. (#22544)

# Why

Nice feature to have for debugging.

# How

- Add the `--no-minify` flag to `npx expo export`.
- Forward the flag to all Metro invocations.
- Also noticed that in some places, we were minifying Node.js code which
doesn't matter, so now we always skip minification when creating static
functions.

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

# Test Plan

- `npx expo export --no-minify` -> JS and CSS is not minified.

---------

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 ...

[cli] Fix e2e tests (#22005)

# Why

These are failing in main:
https://github.com/expo/expo/actions/workflows/cli.yml?query=branch%3Amain

Blame seems to be 8fd977ade89c14fcf9229c10eb19590a3c52

[cli] Fix e2e tests (#22005)

# Why

These are failing in main:
https://github.com/expo/expo/actions/workflows/cli.yml?query=branch%3Amain

Blame seems to be 8fd977ade89c14fcf9229c10eb19590a3c52c80b. No idea why
that changes these or what these are testing but meh.

# How

Update tests.

# Test Plan

`yarn test:e2e`

# 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).

show more ...

chore(cli): switch `EXPO_USE_PATH_ALIASES` to `expo.experiments.tsconfigPaths`. (#21897)

# Why

- It's a bit harder to set env vars and users will want this either
always on or always off.
- Exp

chore(cli): switch `EXPO_USE_PATH_ALIASES` to `expo.experiments.tsconfigPaths`. (#21897)

# Why

- It's a bit harder to set env vars and users will want this either
always on or always off.
- Expo Config makes it easier to deprecate values on a per-version
basis. https://github.com/expo/universe/pull/11872
- Comment out references to the path aliases feature until we're closer
to launch. Users are getting confused when they see the feature
documented.

---------

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 ...

feat(cli): add support for path aliases and absolute imports (#21262)

# Why

- In Expo Router, you have to import outside of the `app` directory
which does not spark joy at scale (e.g. `../../../

feat(cli): add support for path aliases and absolute imports (#21262)

# Why

- In Expo Router, you have to import outside of the `app` directory
which does not spark joy at scale (e.g. `../../../../../../`).
- This is pretty standard functionality in web development, feels odd
not having it in our "Metro for web" system.

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

# How

- Add support for `compilerOptions.baseUrl` from `tsconfig.json` and
`jsconfig.json` files to Metro. This enables absolute imports.
- Add support for `compilerOptions.paths` aliases from `tsconfig.json`
and `jsconfig.json` files to Metro. This enables path aliases. Tried to
keep the implementation as close to TypeScript as possible to reduce
maintenance.
- Absolute imports utilize built-in Metro behavior making it more
reliable. We basically just register the baseUrl as a location to search
for node modules.
- Couldn't decide where to document the feature so I put it in multiple
places.
- We might need to update expo jest to have similar functionality in the
future (it might already support these fields, didn't check).


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

# Test Plan

- Added some unit tests for path aliases (non-exhaustive).
- For correctness, you can use this feature in vscode and all
autocomplete suggestions should work as the bundling now matches the
built-in resolution.

<!--
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 ...

[2/3] upgrade react native 0.71 (#20832)

# Why

follow up #20799 for react-native 0.71 upgrade. this pr aims for jest upgrade and fix all broken tests.
close ENG-7192

# How

- upgrade packag

[2/3] upgrade react native 0.71 (#20832)

# Why

follow up #20799 for react-native 0.71 upgrade. this pr aims for jest upgrade and fix all broken tests.
close ENG-7192

# How

- upgrade packages
- `jest: ^26.0.24 -> ^29.2.1`
- `jest-watch-typeahead: 0.6.4 -> 2.2.1`
- `@types/jest: ^26.0.24 -> ^29.2.1`
- `babel-jest: ^26.6.3 -> ^29.2.1`
- `@jest/create-cache-key-function: ^27.0.1 -> ^29.2.1`
- `@babel/preset-env: ^7.12.9 -> ^7.14.0`
- `eslint: ^8.20.0 -> ^8.29.0`
- add `jest-environment-jsdom` because new jest does not include it by default
- [core] fix `SyntheticPlatformEmitter` type error. originally it refers to `react-native/Libraries/EventEmitter/RCTDeviceEventEmitter` internal file which has incorrect type setup in 0.71. we could use the `react-native.DeviceEventEmitter` instead.
- [expo-linking]: remove the deprecated `Linking.removeEventListener` (which is also removed from upstream)
- [firebase-recaptcha] remove broken web test because firebase ESM which is not supported by jest. this pr simply remove the test case because the package is deprecated.
- [jest-expo-enzyme] remove this package and move to [the archived repo](https://github.com/expo/jest-expo-enzyme). enzyme cannot upgrade to jest 29.
- remove `@types/react-native` and the versioned cli package check. because 0.71 ships the types directly.
- [ncl] workaround `@react-native-community/slider`, `@react-native-segmented-control/segmented-control`, and `@react-native-masked-view/masked-view` type errors in the `react-native-71-fix.d.ts`.
- for other details, please check the commit histories one by one.

# Test Plan

- ci passed
- for test-suite ios ci error, i've mentioned in #20799

show more ...

feat(cli): add -p shorthand to export (#19715)

* feat: add -p shorthand to export

* Update packages/@expo/cli/CHANGELOG.md

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

feat(cli): add -p shorthand to export (#19715)

* feat: add -p shorthand to export

* Update packages/@expo/cli/CHANGELOG.md

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

* Update export-test.ts

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

show more ...

feat(cli): add web support to metro (#17927)

* feat: add web support for metro

* undo patch

* Update index.js

* Update MetroBundlerDevServer.ts

* Add second bundler dev server

* Add d

feat(cli): add web support to metro (#17927)

* feat: add web support for metro

* undo patch

* Update index.js

* Update MetroBundlerDevServer.ts

* Add second bundler dev server

* Add dev loading view to web

* Put feature behind EXPO_USE_METRO_WEB flag

* Move custom config into CLI

* Add support for assets across platforms

* reduce

* Added upstream web support

* Update webTemplate.ts

* Update CHANGELOG.md

* Update instantiateMetro.ts

* Update instantiateMetro.ts

* Update index.js

* Added bundle splitting support

* Update startAsync.ts

* Fixed default settings

* Add ability to copy from public folder

* wip: redirect unmatched routes to `/` on web

* fix fallback api

* Update exportApp.ts

* Update instantiateMetro.ts

* Update exportApp.ts

* clean up handler

* fixup

* clean up

* add web to export test

* Update start-test.ts

* added static serving for web

* Update packages/@expo/cli/CHANGELOG.md

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

* Update yarn.lock

lint fix

fix tests

* Update export-test.ts

* added template tests

* Create HistoryFallbackMiddleware-test.ts

* test ManifestMiddleware

* Create ServeStaticMiddleware-test.ts

* refactor multiplatform

* Update ManifestMiddleware-test.ts

* Update withMetroMultiPlatform.ts

* Update for latest metro

* Update packages/@expo/cli/src/export/resolveOptions.ts

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

show more ...

feat(cli): redesign cli help interface (#17223)

* redesign cli help interface

* Update CHANGELOG.md

* Update index.ts

* Update packages/@expo/cli/CHANGELOG.md

Co-authored-by: Expo Bot <3

feat(cli): redesign cli help interface (#17223)

* redesign cli help interface

* Update CHANGELOG.md

* Update index.ts

* Update packages/@expo/cli/CHANGELOG.md

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

* Updated export

* updated the export

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

show more ...

feat(cli): add `export` command (#17034)

* feat(cli): add export command

* Update CHANGELOG.md

* update tests

* Update packages/@expo/cli/CHANGELOG.md

Co-authored-by: Expo Bot <34669131+

feat(cli): add `export` command (#17034)

* feat(cli): add export command

* Update CHANGELOG.md

* update tests

* Update packages/@expo/cli/CHANGELOG.md

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

* reduce interface

* refactor

refactor

refactor

* refactor

* remove all merging code

* drop aliases

* Added asset saving tests

* refactor export code up

* Update env.ts

* Drop unused

* added e2e tests

* Dropped --quiet flag

* PR Feedback

* fix tests

* fix export tests

* Update export-test.ts

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

show more ...