Using ngrok with Vuer¶

ngrok is a popular tunneling service that can expose your local server with SSL/TLS encryption.

Installation¶

For Mac users:

brew install ngrok

For other platforms, see the official ngrok installation guide.

After installation, you’ll need to sign up for a free account at ngrok.com and authenticate:

ngrok config add-authtoken YOUR_AUTHTOKEN

Free Tier (No Subscription Required)¶

The ngrok free tier works perfectly for WebXR development. Simply start ngrok with:

ngrok http 8012

You should see output like:

Forwarding
https://1a2b-3c4d-5e6f.ngrok-free.app -> http://localhost:8012

Note: The URL will be randomly generated and will change each time you restart ngrok.

This successfully promotes your local vuer server from ws://localhost:8012 to wss://1a2b-3c4d-5e6f.ngrok-free.app (note the double wss in the protocol).

Connecting to Your Vuer Server (Free Tier)¶

Once ngrok is running, use the randomly generated URL to connect:

https://vuer.ai/?ws=wss://1a2b-3c4d-5e6f.ngrok-free.app

Note: If you change the Vuer port (e.g., app = Vuer(port=3012)), you need to update the ngrok command accordingly:

ngrok http 3012

The connection URL remains the same format, just with the new ngrok-generated domain.

Paid Tier (Personal Subscription - For Custom Subdomains)¶

If you have a Personal subscription plan, you can use custom subdomains that remain consistent across restarts.

Configuration with Persistent Subdomains¶

Edit the ngrok configuration:
```
ngrok config edit
```

Add the following below your authtoken:

endpoints:
    - name: vuer-demo
      url: https://{YOUR_USERNAME}-vuer-port.ngrok.app
      upstream:
        url: 8012
    - name: vuer-dev
      url: https://{YOUR_USERNAME}-dev.ngrok.app
      upstream:
        url: 3000

Start all configured tunnels:
```
ngrok start --all
```

Quick Start with Custom Subdomain¶

ngrok http --subdomain=YOUR_USERNAME-vuer-port 8012

You should see output like:

Forwarding
https://YOUR_USERNAME-vuer-port.ap.ngrok.io -> http://localhost:8012

Connecting to Your Vuer Server (Paid Tier)¶

https://vuer.ai/?ws=wss://YOUR_USERNAME-vuer-port.ap.ngrok.io

Note: If you change the Vuer port (e.g., app = Vuer(port=3012)), you need to update the ngrok command accordingly:

ngrok http --subdomain=YOUR_USERNAME-vuer-port 3012

The connection URL remains the same since you’re using a custom subdomain.