⬡ Dev Tools/2026-04-07Advanced

Rork Max × Expo Router Web: Deploy iOS, Android & Web from a Single Codebase

A complete guide to adding web support to your Rork Max app using Expo Router v5. Covers platform-specific UI branching, SEO meta tags, Cloudflare Pages deployment, and a unified CI/CD pipeline for iOS, Android, and Web.

Rork Max²³² Expo Router⁶ cross-platform⁶ React Native Web web support SEO Cloudflare Pages

✦ Premium Article

"We have an iOS and Android app — can we also ship a web version?" It's a common question, and the traditional answer involves maintaining a separate Next.js or Remix codebase, doubling or tripling your maintenance burden every time you add a feature.

Expo Router v5's web support changes this equation significantly. Your Rork Max–generated React Native app can be compiled for the browser with minimal additional code. This guide covers everything from the initial setup to SEO optimization, Cloudflare Pages deployment, and a unified CI/CD pipeline that ships all three platforms on every commit.

How Expo Router Web Works

Expo Router is a file-system routing library built on React Navigation. Under the hood, web builds use react-native-web to map React Native primitives to DOM elements: <View> becomes <div>, <Text> becomes <span>, and so on.

Your app/ directory structure becomes your URL structure:

app/
  ├── (tabs)/
  │   ├── _layout.tsx      ← Tab navigation
  │   ├── index.tsx        ← Route: /
  │   ├── explore.tsx      ← Route: /explore
  │   └── settings.tsx     ← Route: /settings
  ├── articles/
  │   ├── [id].tsx         ← Route: /articles/:id
  │   └── index.tsx        ← Route: /articles
  └── _layout.tsx          ← Root layout

Setting Up Web Support

Configuring app.json

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "platforms": ["ios", "android", "web"],
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/favicon.png"
    },
    "experiments": {
      "typedRoutes": true
    }
  }
}

Use "output": "static" to generate static HTML files at build time — better for SEO and CDN caching than server-rendered output.

Installing Dependencies

npx expo install react-native-web react-dom @expo/metro-runtime

Running the Web Build

# Development — opens in browser alongside the simulator
npx expo start --web
 
# Production static build
npx expo export --platform web
# Output: dist/ directory with HTML, JS, and CSS files

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN

✦Configure Expo Router v5 web support to manage iOS, Android, and Web from a single codebase

✦Platform branching with Platform.select and .web.tsx file extensions for platform-specific UI

✦Deploy to Cloudflare Pages with automatic SSL, custom domains, and a unified GitHub Actions CI/CD pipeline

Secure payment via Stripe · Cancel anytime

✦

Unlock This Article

Get full access to the rest of this article. Buy once, read anytime. This site is ad-free — your support goes directly toward keeping it running.

Unlock all articles with Membership →

Platform-Specific UI Branching

Web and native have different UX expectations. Use platform branching to deliver the right experience on each.

Platform.select for Styles

import { Platform, StyleSheet } from 'react-native';
 
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      web: {
        maxWidth: 768,
        marginHorizontal: 'auto',
        paddingHorizontal: 24,
      },
      default: {
        flex: 1,
        paddingHorizontal: 16,
      },
    }),
  },
  header: {
    ...Platform.select({
      web: {
        position: 'sticky',
        top: 0,
        zIndex: 100,
        backdropFilter: 'blur(12px)',
        backgroundColor: 'rgba(255, 255, 255, 0.85)',
      },
      default: {},
    }),
  },
});

Platform-Specific File Extensions

Metro Bundler automatically resolves .web.tsx over .tsx on web, letting you have genuinely different implementations per platform:

components/
  ├── VideoPlayer.tsx         ← Fallback for all platforms
  ├── VideoPlayer.web.tsx     ← Web: uses <video> tag
  └── VideoPlayer.native.tsx  ← iOS/Android: uses expo-av

// VideoPlayer.web.tsx
export const VideoPlayer = ({ uri }: { uri: string }) => (
  <video
    src={uri}
    controls
    style={{ width: '100%', maxHeight: 480, borderRadius: 8 }}
  />
);
 
// VideoPlayer.native.tsx
import { Video, ResizeMode } from 'expo-av';
 
export const VideoPlayer = ({ uri }: { uri: string }) => (
  <Video
    source={{ uri }}
    resizeMode={ResizeMode.CONTAIN}
    useNativeControls
    style={{ width: '100%', height: 240 }}
  />
);

Navigation on Web

Expo Router uses the browser's History API on web. <Link> components automatically render as <a> tags, giving you correct SEO semantics and keyboard accessibility without any extra work:

import { Link } from 'expo-router';
 
// Renders as <a href="/articles/my-article"> on web
// Navigates natively on iOS/Android
<Link href="/articles/my-article" asChild>
  <TouchableOpacity>
    <Text>Read Article</Text>
  </TouchableOpacity>
</Link>

SEO Meta Tags with expo-router/head

// app/articles/[id].tsx
import Head from 'expo-router/head';
import { Platform } from 'react-native';
 
export default function ArticleScreen() {
  const { id } = useLocalSearchParams();
  const article = useArticle(id as string);
 
  return (
    <>
      {Platform.OS === 'web' && (
        <Head>
          <title>{article.title} | My App</title>
          <meta name="description" content={article.description} />
          <meta property="og:title" content={article.title} />
          <meta property="og:description" content={article.description} />
          <meta property="og:image" content={article.coverImage} />
          <meta property="og:type" content="article" />
          <meta name="twitter:card" content="summary_large_image" />
          <link
            rel="canonical"
            href={`https://myapp.com/articles/${id}`}
          />
        </Head>
      )}
 
      <Stack.Screen options={{ title: article.title }} />
      <ArticleContent article={article} />
    </>
  );
}

Auto-Generating a Sitemap

// scripts/generate-sitemap.ts
const generateSitemap = async () => {
  const BASE_URL = 'https://myapp.com';
  const articles = await fetchAllArticles();
 
  const routes = [
    '/',
    '/explore',
    ...articles.map(a => `/articles/${a.id}`),
  ];
 
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${routes
  .map(
    r => `  <url>
    <loc>${BASE_URL}${r}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <priority>${r === '/' ? '1.0' : '0.8'}</priority>
  </url>`
  )
  .join('\n')}
</urlset>`;
 
  writeFileSync('dist/sitemap.xml', sitemap);
};

Deploying to Cloudflare Pages

Manual Deployment

# Build
npx expo export --platform web
 
# Deploy
npx wrangler pages deploy dist/ --project-name my-app-web

Dashboard Configuration

In the Cloudflare Pages dashboard:

Build command: npx expo export --platform web
Build output directory: dist
Node.js version: 20.x

SPA Routing Fix

Create dist/_redirects to prevent 404s on direct URL access:

/* /index.html 200

Unified CI/CD for All Three Platforms

# .github/workflows/deploy.yml
name: Build & Deploy
 
on:
  push:
    branches: [main]
 
jobs:
  mobile-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: eas build --platform all --non-interactive
 
  web-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install
      - run: npx expo export --platform web
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy dist/ --project-name my-app-web

A single push to main queues iOS and Android builds on EAS while simultaneously deploying the latest web version to Cloudflare's global edge network.

Performance Optimization for Web

Optimized Images with expo-image

import { Image } from 'expo-image';
import { Platform } from 'react-native';
 
// expo-image automatically serves WebP/AVIF on web
// with lazy loading and blur placeholder built in
const OptimizedImage = ({ uri, ...props }: ImageProps) => (
  <Image
    source={{ uri }}
    placeholder={{ blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }}
    contentFit="cover"
    transition={200}
    {...props}
    style={[props.style, Platform.OS === 'web' && { maxWidth: '100%' }]}
  />
);

Font Loading Without Layout Shift

// app/_layout.tsx
export default function RootLayout() {
  const [loaded] = useFonts({
    'SpaceMono-Regular': require('../assets/fonts/SpaceMono-Regular.ttf'),
  });
 
  useEffect(() => {
    if (loaded) SplashScreen.hideAsync();
  }, [loaded]);
 
  // On web, render immediately with system font fallback
  // rather than blocking the entire page render
  if (!loaded && Platform.OS !== 'web') return null;
 
  return <Slot />;
}

Common Issues and Fixes

window is not defined Occurs when browser-specific APIs are used in universal code. Guard with typeof window !== 'undefined' or Platform.OS === 'web'.

Scrolling behaves differently on Web Add contentContainerStyle={{ flexGrow: 1 }} to <ScrollView> for consistent behavior across platforms.

AsyncStorage on Web @react-native-async-storage/async-storage works on web as a localStorage wrapper. Be aware of private browsing limitations and storage quotas.

Gesture Handler limited on Web react-native-gesture-handler has partial web support. For web-only interactions, fall back to native DOM events (onMouseEnter, onClick) using the .web.tsx file extension pattern.

A Note from an Indie Developer

Closing Thoughts

Expo Router's web support won't give you a 100% code-share rate — realistic estimates are 60–80% depending on how much native hardware you use. But that's still a dramatic reduction compared to maintaining three independent codebases.

Your Rork Max–generated app is already structured in a way that's compatible with this approach. Add web support, configure Cloudflare Pages, and you've tripled your potential audience while keeping your development overhead nearly the same. That's a compelling proposition for any indie developer.

Thank You for Reading

Rork Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.