https://github.com/evanbacon/metro-web-demo
Demo of using Metro to bundle Expo apps for web
https://github.com/evanbacon/metro-web-demo
expo metro react-native
Last synced: 7 months ago
JSON representation
Demo of using Metro to bundle Expo apps for web
- Host: GitHub
- URL: https://github.com/evanbacon/metro-web-demo
- Owner: EvanBacon
- Created: 2022-05-14T22:46:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-27T12:28:49.000Z (over 2 years ago)
- Last Synced: 2025-03-19T07:32:28.357Z (7 months ago)
- Topics: expo, metro, react-native
- Language: TypeScript
- Homepage: https://metro-web.netlify.app/
- Size: 697 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Metro web demo
> This is a weekend project, I have no plans to land this in Expo.
https://user-images.githubusercontent.com/9664363/168451003-bc2956bc-c878-4b92-9bdf-b34425303d5b.mp4
Demo of using Metro to bundle Expo apps for web. [Try the web demo](https://metro-web.netlify.app/) (notice the giant JavaScript bundle).
This project also has full Fast Refresh support enabled and a few other React Native debugging features.
There is no bundle splitting, CSS handling, HTML templating, PWA Manifest generation, Service Worker configuration, React Suspense, or other critcal features in this Metro implementation.
The results of `@expo/webpack-config` (Webpack) are much nicer and far more sophisticated, I recommend Webpack for `react-native-web` usage.
## Usage
- Pull the `@evanbacon/cli/metro-web-support` branch on [expo/expo](https://github.com/expo/expo/) and setup the [local CLI](https://github.com/expo/expo/tree/main/packages/%40expo/cli#contributing).
- Pull this project, run `yarn`.
- Set the environment variable `EXPO_USE_METRO_WEB` to `1` or `true`.
- Run `expo start` (using the local CLI), then press `w`.
You can also bundle the project by running `expo export` then test locally with `npx serve dist` or deploy with `npx netlify deploy --dir dist`
## Further Work
- Improve the rudimentary bundling practices across platforms. There should be at least some concept of bundle splitting.
- ~~Web and native cannot be run at the same time because Metro hard codes the usage of `.native.js` files. In my project, the `preferNativePlatform` value has been turned off in a patch (breaking native).~~