Web Hosting Providers

After creating a static export of your Expo Router web app, you can deploy it to any static hosting provider. This guide covers popular options with step-by-step deployment instructions.

Choosing a Hosting Provider

Provider	Best For	Free Tier	Custom Domain	CDN	Edge Functions
EAS Hosting	Expo projects, unified mobile+web	Yes	Yes (paid)	Yes	Yes
Vercel	Next.js-like experience, edge network	Yes	Yes	Yes	Yes
Netlify	Simple deployment, forms	Yes	Yes	Yes	Yes
Cloudflare Pages	Global CDN, speed	Yes	Yes	Yes	Yes
GitHub Pages	GitHub repositories, free hosting	Yes	Limited	No	No
AWS Amplify	AWS ecosystem integration	Free tier	Yes	Yes	Limited
Render	Full-stack apps, databases	Free tier	Yes	Yes	No

EAS Hosting (Recommended for Expo)

EAS Hosting provides seamless integration with Expo projects and unified deployment for mobile and web.

Export Your App

Create a static build:

npx expo export --platform web

This creates a dist directory with your static files.

Install EAS CLI

npm install -g eas-cli
eas login

Deploy to EAS Hosting

eas deploy

EAS CLI will:

Upload your dist directory
Deploy to global CDN
Provide a preview URL: https://[project].exp.app

Set Up Custom Domain (Optional)

Available on paid plans:

Go to EAS Dashboard
Navigate to your project > Hosting
Click Custom domain
Add your domain and configure DNS:
```
CNAME  www  [your-project].exp.direct
```

Configure Deployment Aliases

Create production alias:

# Create production deployment
eas deploy --alias production

# Or make existing deployment production
eas deploy:alias --prod --id [deployment-id]

EAS Hosting Features

Unified deployment:

Deploy web alongside mobile builds
Single command for all platforms
Integrated with EAS Update for mobile

API routes support:

Server functions via Cloudflare Workers
Monitor API logs in dashboard
Built-in crash reporting

Automatic optimization:

Global CDN distribution
Automatic compression
Edge caching

Vercel

Vercel offers excellent performance and developer experience, similar to their Next.js platform.

Install Vercel CLI

npm install -g vercel

Configure Vercel

Create vercel.json in your project root:

vercel.json

{
  "buildCommand": "npx expo export --platform web",
  "outputDirectory": "dist",
  "devCommand": "npx expo start --web",
  "framework": null,
  "cleanUrls": true,
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/"
    }
  ]
}

For static export (not server mode), use the rewrite configuration above to handle client-side routing.

Deploy

vercel

Follow prompts to:

Link to existing project or create new
Configure project settings
Deploy

Vercel provides:

Preview URL: https://[project]-[hash].vercel.app
Production URL: https://[project].vercel.app

Deploy from Git (Recommended)

Push code to GitHub/GitLab/Bitbucket
Go to Vercel Dashboard
Click New Project
Import your repository
Configure:
- Build Command: npx expo export --platform web
- Output Directory: dist
Deploy

Automatic deployments on every push to main branch.

Custom Domain

Go to Project Settings > Domains
Add your domain

Configure DNS:

A     @       76.76.21.21
CNAME www     cname.vercel-dns.com

SSL automatically provisioned

Vercel Environment Variables

Add environment variables in dashboard or via CLI:

vercel env add EXPO_PUBLIC_API_URL
# Enter value: https://api.example.com

Or in vercel.json:

{
  "env": {
    "EXPO_PUBLIC_API_URL": "https://api.example.com"
  }
}

Netlify

Netlify provides simple deployment with great CI/CD integration and form handling.

Install Netlify CLI

npm install -g netlify-cli

Configure Netlify

Create netlify.toml in project root:

netlify.toml

[build]
  command = "npx expo export --platform web"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"

Deploy

netlify deploy

# For production
netlify deploy --prod

Or connect to Git:

Go to Netlify Dashboard
Click New site from Git
Connect repository
Build settings auto-detected from netlify.toml
Deploy

Custom Domain

Go to Site settings > Domain management
Add custom domain
Configure DNS:
```
CNAME www [site-name].netlify.app
```
Enable HTTPS (automatic)

Netlify Features

Forms: Add forms with zero configuration:

<form netlify>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Submit</button>
</form>

Split testing: A/B test different branches:

netlify.toml

[split_testing]
  branch = "feature-branch"
  traffic = 0.2  # 20% traffic to feature branch

Cloudflare Pages

Cloudflare Pages offers global CDN with excellent performance and security.

Create Cloudflare Account

Deploy from Git

Go to Cloudflare Pages dashboard
Click Create a project
Connect to GitHub/GitLab
Select repository
Configure build:
- Build command: npx expo export --platform web
- Build output directory: dist
- Root directory: (leave empty or set if monorepo)

Configure _redirects

Create public/_redirects for client-side routing:

public/_redirects

/*    /index.html    200

Custom Domain

Go to Custom domains
Add your domain
Configure DNS (if domain not on Cloudflare):
```
CNAME www [project].pages.dev
```
Or migrate nameservers to Cloudflare for automatic setup

Cloudflare Workers

Add serverless functions:

functions/api/hello.js

export async function onRequest() {
  return new Response(JSON.stringify({ message: 'Hello' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Access at: https://[project].pages.dev/api/hello

GitHub Pages

Free hosting for public repositories with GitHub.

Install gh-pages

npm install --save-dev gh-pages

Configure package.json

Add deployment scripts:

package.json

{
  "scripts": {
    "deploy": "npx expo export --platform web && npx gh-pages -d dist"
  },
  "homepage": "https://[username].github.io/[repo-name]"
}

For custom domain:

{
  "homepage": "https://example.com"
}

Create CNAME file

For custom domains, create public/CNAME:

public/CNAME

example.com

Deploy

npm run deploy

This:

Exports your app to dist
Pushes dist to gh-pages branch
GitHub Pages serves from that branch

Configure Repository

Go to repository Settings > Pages
Source: gh-pages branch
Custom domain: Enter your domain (optional)
Enforce HTTPS: Enabled

Configure DNS (Custom Domain)

A     @     185.199.108.153
A     @     185.199.109.153
A     @     185.199.110.153
A     @     185.199.111.153
CNAME www   [username].github.io

GitHub Pages Limitations

Single-page app routing requires workaround
No server-side logic
100GB bandwidth/month limit
1GB repository size limit

AWS Amplify

AWS Amplify integrates with AWS services and provides full CI/CD.

Install Amplify CLI

npm install -g @aws-amplify/cli
amplify configure

Deploy from Console

Go to AWS Amplify Console
Click New app > Host web app
Connect repository (GitHub, GitLab, Bitbucket, CodeCommit)
Configure build:
- Build command: npx expo export --platform web
- Output directory: dist
Deploy

Configure amplify.yml

Create amplify.yml for custom build:

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npx expo export --platform web
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Custom Domain

Go to App settings > Domain management
Add domain
Amplify handles DNS configuration automatically

Or manually configure:

CNAME www [branch-name].[app-id].amplifyapp.com

Amplify Features

Branch deployments:

Preview URLs for each branch
Automatic builds on pull requests

Environment variables:

Managed in Amplify Console
Different values per branch/environment

Render

Render provides free static site hosting with automatic SSL.

Create Account

Deploy Static Site

Click New > Static Site
Connect GitHub/GitLab
Select repository
Configure:
- Build Command: npx expo export --platform web
- Publish Directory: dist
Create Static Site

Custom Domain

Go to site Settings > Custom Domain
Add domain
Configure DNS:
```
CNAME www [site-name].onrender.com
```
SSL automatically provisioned

Deployment Best Practices

Automated Deployments

Set up CI/CD for automatic deployments:

.github/workflows/deploy.yml

name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Export web
        run: npx expo export --platform web
      
      - name: Deploy to Netlify
        uses: netlify/actions/cli@master
        with:
          args: deploy --dir=dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

Environment-Specific Builds

Use different configurations per environment:

package.json

{
  "scripts": {
    "build:staging": "EXPO_PUBLIC_ENV=staging npx expo export --platform web",
    "build:production": "EXPO_PUBLIC_ENV=production npx expo export --platform web",
    "deploy:staging": "npm run build:staging && netlify deploy --dir=dist",
    "deploy:production": "npm run build:production && netlify deploy --prod --dir=dist"
  }
}

Performance Optimization

Enable compression: Most hosts enable automatically, but verify:

netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    Content-Encoding = "gzip"

Cache static assets:

netlify.toml

[[headers]]
  for = "/_expo/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Optimize images: Use Cloudflare Images, Vercel Image Optimization, or similar:

// Cloudflare Images example
<img 
  src="https://imagedelivery.net/[account]/[image-id]/public"
  alt="Optimized image"
/>

Security Headers

Add security headers to protect your app:

netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"

Monitoring and Analytics

Google Analytics:

app/_layout.tsx

import { useEffect } from 'react';
import { usePathname } from 'expo-router';

export default function RootLayout() {
  const pathname = usePathname();
  
  useEffect(() => {
    if (typeof window !== 'undefined' && window.gtag) {
      window.gtag('config', 'GA_MEASUREMENT_ID', {
        page_path: pathname,
      });
    }
  }, [pathname]);
  
  return <Slot />;
}

Vercel Analytics:

npm install @vercel/analytics

app/_layout.tsx

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout() {
  return (
    <>
      <Slot />
      <Analytics />
    </>
  );
}

Troubleshooting

404 Errors on Refresh

Issue: Routes return 404 when directly accessed or refreshed Solution: Configure redirects to index.html:

Tab Title
Tab Title
Tab Title

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

public/_redirects

/*  /index.html  200

Environment Variables Not Working

Issue: process.env.EXPO_PUBLIC_* is undefined Solutions:

Prefix with EXPO_PUBLIC_:

EXPO_PUBLIC_API_URL=https://api.example.com

Add to hosting provider:
- Vercel: Project Settings > Environment Variables
- Netlify: Site settings > Build & deploy > Environment
- Cloudflare: Settings > Environment variables
Rebuild app (env vars are embedded at build time)

Assets Not Loading

Issue: Images/fonts return 404 Solution: Use absolute paths from root:

// Correct
<Image source={{ uri: '/images/logo.png' }} />

// Wrong (relative path)
<Image source={{ uri: './images/logo.png' }} />

Build Fails on Hosting Provider

Issue: Build works locally but fails in CI Check:

Node version matches:

package.json

{
  "engines": {
    "node": ">=18.0.0"
  }
}

Install script:

{
  "scripts": {
    "postinstall": "npx expo-optimize"
  }
}

Check build logs for specific errors

Next Steps

Static Export - Learn more about creating static exports
Build Configuration - Configure for mobile platforms
Over-the-Air Updates - Update mobile apps remotely

Building

Distribution

Web Deployment

​Web Hosting Providers

​Choosing a Hosting Provider

​EAS Hosting (Recommended for Expo)

​Export Your App

​Install EAS CLI

​Deploy to EAS Hosting

​Set Up Custom Domain (Optional)

​Configure Deployment Aliases

​EAS Hosting Features

​Vercel

​Install Vercel CLI

​Configure Vercel

​Deploy

​Deploy from Git (Recommended)

​Custom Domain

​Vercel Environment Variables

​Netlify

​Install Netlify CLI

​Configure Netlify

​Deploy

​Custom Domain

​Netlify Features

​Cloudflare Pages

​Create Cloudflare Account

​Deploy from Git

​Configure _redirects

​Custom Domain

​Cloudflare Workers

​GitHub Pages

​Install gh-pages

​Configure package.json

​Create CNAME file

​Deploy

​Configure Repository

​Configure DNS (Custom Domain)

​GitHub Pages Limitations

​AWS Amplify

​Install Amplify CLI

​Deploy from Console

​Configure amplify.yml

​Custom Domain

​Amplify Features

​Render

​Create Account

​Deploy Static Site

​Custom Domain

​Deployment Best Practices

​Automated Deployments

​Environment-Specific Builds

​Performance Optimization

​Security Headers

​Monitoring and Analytics

​Troubleshooting

​404 Errors on Refresh

​Environment Variables Not Working

​Assets Not Loading

​Build Fails on Hosting Provider

​Next Steps

Build docs developers (and LLMs) love

Web Hosting Providers

Choosing a Hosting Provider

EAS Hosting (Recommended for Expo)

Export Your App

Install EAS CLI

Deploy to EAS Hosting

Set Up Custom Domain (Optional)

Configure Deployment Aliases

EAS Hosting Features

Vercel

Install Vercel CLI

Configure Vercel

Deploy

Deploy from Git (Recommended)

Custom Domain

Vercel Environment Variables

Netlify

Install Netlify CLI

Configure Netlify

Deploy

Custom Domain

Netlify Features

Cloudflare Pages

Create Cloudflare Account

Deploy from Git

Configure _redirects

Custom Domain

Cloudflare Workers

GitHub Pages

Install gh-pages

Configure package.json

Create CNAME file

Deploy

Configure Repository

Configure DNS (Custom Domain)

GitHub Pages Limitations

AWS Amplify

Install Amplify CLI

Deploy from Console

Configure amplify.yml

Custom Domain

Amplify Features

Render

Create Account

Deploy Static Site

Custom Domain

Deployment Best Practices

Automated Deployments

Environment-Specific Builds

Performance Optimization

Security Headers

Monitoring and Analytics

Troubleshooting

404 Errors on Refresh

Environment Variables Not Working

Assets Not Loading

Build Fails on Hosting Provider

Next Steps