Deploy Bridge UI

This guide walks you through deploying the Surge Bridge UI, including all necessary configurations and services.

1. Clone Repository

First, clone the Surge Taiko Mono repository:

git clone https://github.com/NethermindEth/surge-taiko-mono.git
cd surge-taiko-mono/packages/bridge-ui

2. SSL Certificate Setup

Generate SSL certificates for nginx:

cd ./nginx
chmod +x ./generate-certs.sh
./generate-certs.sh

3. Configure Nginx Reverse Proxy

Prerequisites

• L1 RPC URL
• L1 Blockscout URL
• L1 to L2 Relayer URL
• L2 RPC URL
• L2 Blockscout URL
• L2 to L1 Relayer URL

Update the nginx configuration file ./nginx/nginx.conf with your specific URLs and endpoints.

Example configuration part:

# L1 RPC endpoint
location /l1-rpc/ {
    proxy_pass http://placeholder:32002/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

4. Configure Components

Configuration Files Setup

You'll need to configure several JSON files before deployment. Each has specific requirements:

note

The ULRs specified in the configuration files must use HTTPS.

Bridges

Prerequisites

• L1 Chain ID
• L1 Contract Addresses:
• L1_BRIDGE
• L1_ERC20_VAULT
• L1_ERC721_VAULT
• L1_ERC1155_VAULT
• L1_SIGNAL_SERVICE
• L2 Chain ID
• L2 Contract Addresses:
• L2_BRIDGE
• L2_ERC20_VAULT
• L2_ERC721_VAULT
• L2_ERC1155_VAULT
• L2_SIGNAL_SERVICE

Path: ./config/configuredBridges.json

tip

The file contains default addresses used in the tutorial. Replace if necessary.

Chains

Prerequisites

• L1 Chain ID
• L1 RPC URL
• L2 Chain ID
• L2 RPC URL

Path: ./config/configuredChains.json

Modify rpcUrls fields to point to the alias specified in the nginx configuration.

Example configuration parts:

"3151908": {
    "name": "Kurtosis",
    "type": "L1",
    "icon": "https://cdn.worldvectorlogo.com/logos/ethereum-eth.svg",
    "rpcUrls": {
        "default": {
            "http": [
            "https://placeholder/l1-rpc/"
            ]
        }
    },

    ...
}

"763374": {
    "name": "Taiko",
    "type": "L2",
    "icon": "https://cdn.worldvectorlogo.com/logos/ethereum-eth.svg",
    "rpcUrls": {
        "default": {
            "http": [
                "https://placeholder/l2-rpc/"
            ]
        }
    },

    ...
}

Relayer

Prerequisites

• L1 Chain ID
• L1 to L2 Relayer URL
• L2 Chain ID
• L2 to L1 Relayer URL

Path: ./config/configuredRelayer.json

Example configuration:

{
    "configuredRelayer": [
        {
        "chainIds": [3151908, 763374],
        "url": "https://placeholder/l1-relayer/"
        },
        {
        "chainIds": [763374, 3151908],
        "url": "https://placeholder/l2-relayer/"
        }
    ]
}

Additional Configs

These files also need to be configured:

• ./config/configuredCustomTokens.json
• ./config/configuredEventIndexer.json

tip

These files may require minimal or no modification depending on your deployment needs.

5. Deploy Services

Deploy the Bridge UI and nginx services:

# Start Bridge UI
docker compose --profile bridge-ui up -d --build

# Start Nginx
docker compose --profile nginx up -d

Verification Steps

After deployment, verify:

1. Bridge UI Accessibility

• Check if the UI is accessible via the configured domain
• Verify SSL certificate is working properly

2. Component Connectivity

• Verify connection to L1 and L2 networks
• Check relayer connectivity
• Confirm Blockscout integration

3. Service Health

# Check running containers
docker compose ps

# View Bridge UI logs
docker compose logs bridge-ui -f

# View Nginx logs
docker compose logs nginx -f

Troubleshooting

If you encounter issues:

1. UI Access Issues

• Check nginx configuration
• Verify SSL certificate setup
• Confirm port mappings

2. Network Connectivity

• Verify RPC endpoints
• Check relayer connections
• Confirm blockchain network access

3. Configuration Problems

• Validate JSON syntax in config files
• Verify contract addresses
• Check chain IDs match your network

warning

Make sure all URLs in the nginx configuration are accessible and properly secured before deployment.