Web Deployment

Shipnative fully supports web deployment via Expo Web. Your React Native app runs on iOS, Android, and web from a single codebase.

Same code, three platforms. You don’t need to maintain a separate web app - your React Native code works on web automatically via react-native-web.

Quick Start

Build and preview your web app:

cd apps/app

# Development
yarn web              # Start dev server at localhost:19006

# Production build
yarn bundle:web       # Creates optimized build in web-build/

What Works on Web

Everything! Shipnative’s architecture ensures feature parity across platforms:

Feature	Web Support
UI Components	Unistyles 3.0 fully supports web
Authentication	Supabase (email/password + OAuth)
Social Login	Google & Apple OAuth via browser redirect
Payments	RevenueCat Web Billing
Analytics	PostHog JavaScript SDK
Error Tracking	Sentry Browser SDK
Dark Mode	Automatic theme switching
Navigation	React Navigation web support

Deployment Options

Vercel (Recommended)

Push your code to GitHub
Import project at vercel.com
Set Root Directory to apps/app
Set Build Command to yarn bundle:web
Set Output Directory to web-build
Add environment variables (from your .env)
Deploy!

Netlify

Import repo at netlify.com
Set Base directory to apps/app
Set Build command to yarn bundle:web
Set Publish directory to apps/app/web-build
Add environment variables
Deploy!

Other Platforms

The web build is a static site, so it works anywhere:

Cloudflare Pages
AWS Amplify
GitHub Pages
Firebase Hosting
Any static host

Environment Variables

Web builds need the same EXPO_PUBLIC_* variables as mobile:

# Required for production
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-key

# Payments (RevenueCat Web Billing)
EXPO_PUBLIC_REVENUECAT_WEB_KEY=your-web-key

# Analytics
EXPO_PUBLIC_POSTHOG_API_KEY=your-posthog-key
EXPO_PUBLIC_POSTHOG_HOST=https://app.posthog.com

# Error tracking
EXPO_PUBLIC_SENTRY_DSN=your-sentry-dsn

CORS Configuration: Add your web domain to Supabase’s allowed origins:

Go to Supabase Dashboard → Project Settings → API
Add your domain to “Allowed Origins (CORS)”
Include http://localhost:19006 for local development

Google and Apple OAuth work on web via browser redirects. See Social Login → Web OAuth Setup for configuration details. Quick checklist:

Add redirect URLs to Supabase: https://yourapp.com/auth/callback
Add JavaScript origins to Google Cloud Console: https://yourapp.com
Ensure CORS is configured (see warning above)

RevenueCat Web Billing

RevenueCat supports web subscriptions via their Web Billing feature:

Enable Web Billing in your RevenueCat project
Connect a payment gateway (Stripe recommended)
Add EXPO_PUBLIC_REVENUECAT_WEB_KEY to your environment
Create web-specific products in RevenueCat dashboard

The PaywallScreen automatically detects the web platform and uses the web SDK.

Web-Specific Considerations

Responsive Design

Shipnative uses Unistyles breakpoints for responsive layouts:

const styles = StyleSheet.create((theme, runtime) => ({
  container: {
    // Mobile-first
    flexDirection: 'column',
    padding: theme.spacing.md,
    
    // Tablet+
    variants: {
      breakpoint: {
        md: {
          flexDirection: 'row',
          maxWidth: 800,
        },
      },
    },
  },
}))

React Navigation handles web routing automatically:

Screen names become URL paths
Back button works with browser history
Deep linking supported

SEO

For better SEO, consider:

Adding meta tags via expo-document-picker or custom HTML
Using semantic HTML elements
Implementing proper heading hierarchy

Troubleshooting

Vercel: 'Missing required environment variables' error

Issue: Expo web builds deployed to Vercel fail with:

Missing required environment variables: supabaseUrl, supabasePublishableKey

Why this happens: Metro doesn’t inline process.env.EXPO_PUBLIC_* variables for web builds the way it does for native. The app falls back to reading from Constants.expoConfig.extra, which requires the variables to be explicitly passed in app.config.ts.Solution: This is already fixed in the boilerplate. The app.config.ts includes an extra section that passes all EXPO_PUBLIC_* variables through to Constants.expoConfig.extra. Just make sure you have the latest boilerplate version.If you’re on an older version, add this to your app.config.ts:

return {
  ...baseConfig,
  extra: {
    ...baseConfig.extra,
    supabase_url: process.env.EXPO_PUBLIC_SUPABASE_URL,
    supabase_publishable_key: process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY,
    // ... other env vars
  },
  // ... rest of config
}

CORS errors

Add your domain to Supabase’s allowed origins:

Dashboard → Project Settings → API → Allowed Origins
Include both development (localhost:19006) and production URLs

Styles look different on web

Some React Native styles don’t translate perfectly to web. Check:

Shadow properties (use boxShadow for web)
Touch feedback (may need web-specific hover states)
Fonts (ensure web fonts are loaded)

Build fails with 'window is not defined'

Some native-only packages reference window. Fix:

Check if the package supports web
Use platform-specific imports: MyComponent.web.tsx / MyComponent.tsx
Add to Metro’s resolver.resolveRequest if needed

Marketing Page vs App Web Build

Shipnative includes two web experiences:

	App Web Build	Marketing Page
Location	`apps/app` (this guide)	`apps/web`
Purpose	Full app running in browser	Landing/waitlist page
Framework	Expo Web + react-native-web	Vite + React + Tailwind
Styling	Unistyles 3.0	Tailwind CSS
Deploy	Your app domain	Your marketing domain

Learn about the marketing page →

Introduction

Getting Started

Core Features

Development

Deployment

Support

Quick Start

What Works on Web

Deployment Options

Vercel (Recommended)

Netlify

Other Platforms

Environment Variables

RevenueCat Web Billing

Web-Specific Considerations

Responsive Design

Navigation on Web

SEO

Troubleshooting

Marketing Page vs App Web Build

​Quick Start

​What Works on Web

​Deployment Options

​Vercel (Recommended)

​Netlify

​Other Platforms

​Environment Variables

​Social Login on Web

​RevenueCat Web Billing

​Web-Specific Considerations

​Responsive Design

​Navigation on Web

​SEO

​Troubleshooting

​Marketing Page vs App Web Build

Quick Start

What Works on Web

Deployment Options

Vercel (Recommended)

Netlify

Other Platforms

Environment Variables

Social Login on Web

RevenueCat Web Billing

Web-Specific Considerations

Responsive Design

Navigation on Web

SEO

Troubleshooting

Marketing Page vs App Web Build