Guide

Set up your framework for a tunnel

Make a development server accept requests from your tunnel's address.

Applies to: Vite 6 and later, Next.js 15 and later, Expo, Shopify CLI, Laravel; connector 0.2.0
Time: About 5 minutes
What it changes: Changes development settings in your project so it accepts the tunnel's address.
Last reviewed: 5 November 2026, by Product documentation

Before you begin

A tunnel connected to your app's port.
Your tunnel's address, for example https://example.instawormhole.site. In the snippets below, replace example with your own name.

What to know before you start

Each framework has its own settings and they change between versions. If a snippet does not match your version, check that tool's own documentation.

Steps

Step 1. Vite: allow the address and send hot reload through the tunnel.
Vite 6 and later refuse host names they do not know and answer: Blocked request. This host is not allowed.
vite.config.js
```
export default {
  server: {
    allowedHosts: ['example.instawormhole.site'],
    hmr: { protocol: 'wss', clientPort: 443 },
  },
}
```
You should see: The page loads through the public address and edits appear without a manual reload.
Step 2. Next.js: allow the address for development assets.
Next.js 15 and later block development assets requested from other origins, which breaks hot reload and hydration.
next.config.js
```
module.exports = {
  allowedDevOrigins: ['example.instawormhole.site'],
}
```
You should see: The page loads with its scripts and hot reload through the public address.
Step 3. Expo: tunnel the Metro port and tell Expo to advertise your address.
Terminal
```
npx @instawormhole/connector 8081
EXPO_PACKAGER_PROXY_URL=https://example.instawormhole.site npx expo start
```
The first command prints your temporary address; use a durable tunnel if you want the same address every time. This replaces expo start --tunnel.
You should see: Expo shows your address as the one to open on a device.
Step 4. Shopify CLI: pass your tunnel's address to the CLI.
Shopify CLI starts its own tunnel by default. To use yours, connect a tunnel to the app's port first.
Terminal
```
shopify app dev --tunnel-url https://example.instawormhole.site:443
```
You should see: The CLI uses your address instead of its own tunnel.
Step 5. Laravel and PHP: run the server and set the application URL.
Terminal
```
npx @instawormhole/connector 8000
```
Run php artisan serve on port 8000, then set APP_URL=https://example.instawormhole.site in your .env file so generated links use your address. Behind a proxy, also trust it; in Laravel 11 and later add ->withMiddleware(fn ($m) => $m->trustProxies(at: '*')) in bootstrap/app.php.
You should see: Links your app generates point at the public address.

You are done when

Your app loads through the public address and hot reload still works.

What to do next

Let Tunnel Doctor show the setting for your address

If something goes wrong

The page shows Blocked request or a host-not-allowed message.: Your development server refused the host name. Add your tunnel's address to the framework setting above, and restart the server.
The page loads but hot reload does not update.: Hot reload uses a WebSocket. For Vite set the hmr option as shown. For Next.js add the address to allowedDevOrigins.

Undo or clean up

Remove the settings you added once you stop using the tunnel's address.

This page is part of Connect a local app. Still stuck? Contact support.

Guide

Set up your framework for a tunnel

Make a development server accept requests from your tunnel's address.

Applies to: Vite 6 and later, Next.js 15 and later, Expo, Shopify CLI, Laravel; connector 0.2.0
Time: About 5 minutes
What it changes: Changes development settings in your project so it accepts the tunnel's address.
Last reviewed: 5 November 2026, by Product documentation

Before you begin

A tunnel connected to your app's port.
Your tunnel's address, for example https://example.instawormhole.site. In the snippets below, replace example with your own name.

What to know before you start

Each framework has its own settings and they change between versions. If a snippet does not match your version, check that tool's own documentation.

Steps

Step 1. Vite: allow the address and send hot reload through the tunnel.
Vite 6 and later refuse host names they do not know and answer: Blocked request. This host is not allowed.
vite.config.js
```
export default {
  server: {
    allowedHosts: ['example.instawormhole.site'],
    hmr: { protocol: 'wss', clientPort: 443 },
  },
}
```
You should see: The page loads through the public address and edits appear without a manual reload.
Step 2. Next.js: allow the address for development assets.
Next.js 15 and later block development assets requested from other origins, which breaks hot reload and hydration.
next.config.js
```
module.exports = {
  allowedDevOrigins: ['example.instawormhole.site'],
}
```
You should see: The page loads with its scripts and hot reload through the public address.
Step 3. Expo: tunnel the Metro port and tell Expo to advertise your address.
Terminal
```
npx @instawormhole/connector 8081
EXPO_PACKAGER_PROXY_URL=https://example.instawormhole.site npx expo start
```
The first command prints your temporary address; use a durable tunnel if you want the same address every time. This replaces expo start --tunnel.
You should see: Expo shows your address as the one to open on a device.
Step 4. Shopify CLI: pass your tunnel's address to the CLI.
Shopify CLI starts its own tunnel by default. To use yours, connect a tunnel to the app's port first.
Terminal
```
shopify app dev --tunnel-url https://example.instawormhole.site:443
```
You should see: The CLI uses your address instead of its own tunnel.
Step 5. Laravel and PHP: run the server and set the application URL.
Terminal
```
npx @instawormhole/connector 8000
```
Run php artisan serve on port 8000, then set APP_URL=https://example.instawormhole.site in your .env file so generated links use your address. Behind a proxy, also trust it; in Laravel 11 and later add ->withMiddleware(fn ($m) => $m->trustProxies(at: '*')) in bootstrap/app.php.
You should see: Links your app generates point at the public address.

You are done when

Your app loads through the public address and hot reload still works.

What to do next

Let Tunnel Doctor show the setting for your address

If something goes wrong

The page shows Blocked request or a host-not-allowed message.: Your development server refused the host name. Add your tunnel's address to the framework setting above, and restart the server.
The page loads but hot reload does not update.: Hot reload uses a WebSocket. For Vite set the hmr option as shown. For Next.js add the address to allowedDevOrigins.

Undo or clean up

Remove the settings you added once you stop using the tunnel's address.

This page is part of Connect a local app. Still stuck? Contact support.

Set up your framework for a tunnel

Before you begin

What to know before you start

Steps

Step 1. Vite: allow the address and send hot reload through the tunnel.

Step 2. Next.js: allow the address for development assets.

Step 3. Expo: tunnel the Metro port and tell Expo to advertise your address.

Step 4. Shopify CLI: pass your tunnel's address to the CLI.

Step 5. Laravel and PHP: run the server and set the application URL.

You are done when

What to do next

If something goes wrong

Undo or clean up

Related

Set up your framework for a tunnel

Before you begin

What to know before you start

Steps

Step 1. Vite: allow the address and send hot reload through the tunnel.

Step 2. Next.js: allow the address for development assets.

Step 3. Expo: tunnel the Metro port and tell Expo to advertise your address.

Step 4. Shopify CLI: pass your tunnel's address to the CLI.

Step 5. Laravel and PHP: run the server and set the application URL.

You are done when

What to do next

If something goes wrong

Undo or clean up

Related