Skip to content

Network Access Setup for Development

This guide explains how to access your development environment from other devices on your network (phones, tablets, other computers).

The Problem

When running the development environment, services are configured to use localhost, which only works on your development machine. When accessing from other devices, you'll see errors like "load failed" because the browser can't connect to localhost:54321 (Supabase).

Quick Solution

Step 1: Find Your Machine's IP Address

On macOS:

ipconfig getifaddr en0
# or if that doesn't work:
ipconfig getifaddr en1

On Linux:

hostname -I | awk '{print $1}'

On Windows:

ipconfig
# Look for "IPv4 Address" under your active network adapter

Example output: 192.168.50.192

Step 2: Update Environment Variables

  1. Copy your current .env.local file:
cd packages/app
cp .env.local .env.local.backup
  1. Update the URLs in .env.local to use your machine's IP address:
# Edit packages/app/.env.local
NEXT_PUBLIC_SUPABASE_URL=http://YOUR_IP:54321  # Replace YOUR_IP
AIHUB_API_GATEWAY_URL=http://YOUR_IP:3001      # Replace YOUR_IP

For example, if your IP is 192.168.50.192:

NEXT_PUBLIC_SUPABASE_URL=http://192.168.50.192:54321
AIHUB_API_GATEWAY_URL=http://192.168.50.192:3001

Step 3: Update Supabase Configuration

Add your network IP to the allowed redirect URLs in packages/database/supabase/config.toml:

[auth]
site_url = "http://localhost:3000"
additional_redirect_urls = ["http://YOUR_IP:3000"]  # Add your IP here

Step 4: Configure Supabase to Accept Network Connections

By default, Supabase binds to localhost only. To accept connections from your network:

  1. Stop Supabase if it's running:
cd packages/database
npx supabase stop
  1. Start Supabase with host binding:
# This is a workaround since Supabase CLI doesn't have a direct option
npx supabase start --network-host

Note: If --network-host doesn't work with your version, you can use Docker directly:

# After starting Supabase normally, update the container network settings
docker network ls  # Find the supabase network
docker ps  # Find the Kong container (API gateway)

Step 5: Restart Services

  1. Stop all services:
./scripts/macos-linux/stop-dev.sh
  1. Start services again:
yarn dev

Step 6: Access from Network Devices

Now you can access the app from any device on your network:

  • App: http://YOUR_IP:3000
  • Supabase Studio: http://YOUR_IP:54323

For a more robust solution that works across networks and handles HTTPS:

  1. Install ngrok:
# macOS
brew install ngrok

# Or download from https://ngrok.com/download
  1. Start your development environment normally:
yarn dev
  1. In separate terminals, create tunnels:
# App
ngrok http 3000

# Supabase API
ngrok http 54321

# AI Hub (if needed)
ngrok http 3001
  1. Update your .env.local with the ngrok URLs:
NEXT_PUBLIC_SUPABASE_URL=https://your-supabase-url.ngrok.io
AIHUB_API_GATEWAY_URL=https://your-aihub-url.ngrok.io
  1. Access your app via the ngrok URL for the app.

Troubleshooting

"Load failed" Error

  • Ensure all URLs in .env.local use your machine's IP, not localhost
  • Check that Supabase is accepting network connections
  • Verify firewall isn't blocking ports 3000, 3001, 54321, 54323

CORS Errors

  • Make sure the Supabase additional_redirect_urls includes your access URL
  • Check that the app URL matches what's configured in Supabase

Can't Connect to Supabase

  • Supabase might still be bound to localhost only
  • Try using ngrok as an alternative
  • Check if your firewall is blocking the connection

Firewall Configuration

Make sure these ports are allowed through your firewall:

  • 3000 (Next.js app)
  • 3001 (AI Hub API)
  • 54321 (Supabase API)
  • 54322 (PostgreSQL)
  • 54323 (Supabase Studio)

macOS:

# Check firewall settings
sudo /usr/libexec/ApplicationFirewall/socketfilterfw --listapps

Windows:

  • Open Windows Defender Firewall
  • Add inbound rules for the ports above

Security Note

⚠️ Warning: Exposing your development environment to your network can be a security risk. Only do this on trusted networks and remember to:

  • Revert your .env.local changes when done
  • Stop services when not in use
  • Never commit network-specific configurations to git