Demo of using Metro to bundle Expo apps for web

Last update: May 17, 2022

Metro web demo

This is a weekend project, I have no plans to land this in Expo.

metro-web.mp4

Demo of using Metro to bundle Expo apps for web. Try the web demo (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 and setup the local CLI.
  • 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).

GitHub

https://github.com/EvanBacon/Metro-web-demo
You might also like...

Uber UI Clone with React Native & Expo

Uber UI Clone with React Native & Expo

Uber: UI Clone with Expo Table of Contents Install & Build Features Linting Demo & Release Notes Install & Build First, make sure you have Expo CLI in

Jun 15, 2022

Built with Expo, React Native, and GraphQL, Lexicon is a pre-built mobile discussions app that you can customize for your users.

Lexicon is a customizable, open source mobile app that provides an elegant mobile discussions experience. Built on top of Discourse, a platform for communities.

May 21, 2022

๐ŸŒž Weather App2 With React, React Native, Expo

๐ŸŒž Weather App2 With React, React Native, Expo

React-Native-Weather-App2 ๐Ÿ”— Demo https://expo.dev/@sugargw/weather-app2 ๐Ÿ–ฅ Preview ๐Ÿ”ฅ Stack Front-end โœ… Packages React React Native Expo ๐Ÿ“– Theory Re

Jun 7, 2022

Carousel app made with Expo and React Native

Carousel app made with Expo and React Native

slidr-that-rock Carousel mobile application in React Native using Expo To run the app locally - git clone https://github.com/Lamisa-zamzam/slidr-that-

Aug 21, 2021

Snacks in a Van web apps Build With React.js

Snacks in a Van web apps Build With React.js

Dec 5, 2021

๐Ÿ‘ Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support

๐Ÿ‘ Responsive Mobile-sized Wrapper for React - Easily prototype your mobile-sized web apps with desktop support

react-mobile-sized-view Featured on reactjsexample.com(thx editor ๐Ÿ™‡ ) ๐Ÿ‘ Responsive Mobile-sized Wrapper for React ๐Ÿš€ Examples โš ๏ธ Warning: The follow

Jun 8, 2022

A family of tools to help build performant and beautiful apps, games and sites for the web

SUPER DUPER ALPHA vinxi A family of tools to help build performant and beautiful apps, games and sites for the web turborepo kitchen sink starter This

Apr 9, 2022

Dribbble Clone built with MongoDB, ExpressJS, React, and Node Technologies. See demo at https://rb.gy/psll7v

Rumbbble Rumbbble, inspired by the Dribbble design community, serves as a portal for developers to showcase their work, receive feedback, and find ins

Jun 9, 2022

IMDb demo site built with React

IMDb demo site built with React

IMDb Clone Demo - https://imdb-react-clone.herokuapp.com/ This React project is a simplified front-end version of the IMDb website. It uses The MovieD

Jun 7, 2022
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app

Spotify: UI Clone with React Native / Expo web demo: Expo Spotify Table of Contents Install & Build Features Linting Expo Web Demo & Release Notes Ins

Jun 16, 2022
Use Storybook (with React Native for Web) in your Expo + Next.js monorepo

Expo + Next.js + Storybook (using React Native for Web) Monorepo Example Here is an example showing how to create a universal React app using Expo and

Jun 19, 2022
Amazon IVS Chat Web Demo
Amazon IVS Chat Web Demo

A demo web application that shows how to implement a basic video + chat application using the AWS serverless application model (SAM) and Javascript (React).

Jun 15, 2022
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)
Mobile app that lets you search for games. Using IGDB and built with Expo (React Native)

Mobile app that lets you search for games. Using IGDB and built with Expo (React Native). game-search-expo.mp4 Try it out with Expo: https://expo.io/@

May 28, 2022
A clone of Ecobank mobile app using react native and expo cli
A clone of Ecobank mobile  app using react native and expo cli

About The Project A simple clone of a bank app. Scan the bar code below to open the app on Expo go or click Click here 1 2 Built With React Native Rea

May 28, 2022
A demo of LaunchDarkly, React, and Vite, using the Pokรฉmon API!
A demo of LaunchDarkly, React, and Vite, using the Pokรฉmon API!

A demo of LaunchDarkly, React, and Vite, using the Pokรฉmon API!

Jan 5, 2022
A demo of a Shopify site using Astro and React.

A demo of a Shopify site using Astro and React.

Jun 5, 2022
Variant on the freeCodeCamp MFE demo eCommerce application using react-location for the routing

Full Site Federation Example with React-Location An example eCommerce app Module Federation in a Full Site Federation configuration, using react-locat

Nov 16, 2021
Disney+ UI Clone with React Native & Expo
Disney+ UI Clone with React Native & Expo

Disney+: UI Clone with Expo Table of Contents Install & Build Features Linting Release Notes Install & Build First, make sure you have Expo CLI instal

Jun 25, 2022
Slack UI Clone with React Native & Expo
Slack UI Clone with React Native & Expo

Slack Clone with Expo Table of Contents Install & Build Stats Linting Demo & Release Notes Install & Build First, make sure you have Expo CLI installe

Jun 13, 2022