Path-Based Routing: draai meerdere services op één tunnel

Het Probleem met Meerdere Tunnels

Moderne webontwikkeling omvat meestal het draaien van meerdere services lokaal: een frontend op poort 3000, een API backend op poort 8080, misschien een database admin panel, documentatie server, of debugging tools. Wanneer je je werk moet delen of testen met externe services, sta je voor een keuze: meerdere tunnels draaien of een betere manier vinden.

Met traditionele tunnel providers zoals ngrok betekent het exposen van een frontend en backend twee aparte tunnels, elk met een eigen URL:

abc123.ngrok.io → je frontend op poort 3000
xyz789.ngrok.io → je API backend op poort 8080

Nu moet je frontend de backend URL weten. Je update je environment variables, configureert CORS, en hoopt dat niets breekt wanneer de tunnel herstart met een nieuwe URL. Webhooks testen? Je hebt nog een tunnel nodig. Delen met een collega? Stuur ze meerdere links en leg uit welke wat is.

Dit wordt snel rommelig.

Hoe ASD Dit Oplost

ASD gebruikt path-based routing aangedreven door geoptimaliseerde Caddy configuraties om meerdere lokale services via één tunnel te serveren. In plaats van jongleren met meerdere URL's, krijg je er één:

jouw-tunnel.tunnel.asd.host/ → je frontend op poort 3000
jouw-tunnel.tunnel.asd.host/api/ → je backend op poort 8080
jouw-tunnel.tunnel.asd.host/admin/ → je admin tools op poort 5432

Je frontend maakt API calls naar /api/users — geen environment variables nodig, geen CORS configuratie, geen URL beheer. Het werkt gewoon, lokaal en via de tunnel.

Eén Tunnel voor Gratis Gebruikers

Path-based routing is hoe ASD echte waarde biedt, zelfs op de gratis tier. Terwijl andere providers je beperken tot één tunnel per service, kan ASD's enkele tunnel je hele development stack exposen. Gratis gebruikers krijgen toegang tot:

Onbeperkt lokale services via één tunnel
Automatische path-based routing via asd.yaml configuratie
Geoptimaliseerde Caddy reverse proxy handling
Geen kunstmatige service limieten

Dit betekent dat een gratis ASD account je in staat stelt een full-stack applicatie te exposen — frontend, backend, database tools, en meer — zonder te betalen voor meerdere tunnel slots.

Frontend + Backend: De Veelvoorkomende Case

Het meest voorkomende scenario is een React/Vue/Svelte frontend die een aparte API backend aanroept. Met ASD configureer je dit in je asd.yaml:

# asd.yaml
services:
  frontend:
    port: 5173
    path: /

  api:
    port: 8080
    path: /api
    strip_prefix: true

De strip_prefix: true optie is belangrijk — het verwijdert /api van het request path voordat het naar je backend wordt doorgestuurd. Dus wanneer je frontend /api/users aanroept, ontvangt je backend /users, precies zoals verwacht.

Draai asd start en beide services zijn toegankelijk via je tunnel. De API calls van je frontend werken identiek in lokale development en wanneer remote benaderd.

Waarom Dit Belangrijk Is

Geen CORS Kopzorgen Meer

Omdat frontend en backend dezelfde origin delen (jouw-tunnel.tunnel.asd.host), zijn er geen cross-origin issues. Geen CORS headers te configureren, geen preflight requests, geen browser security waarschuwingen.

Consistente URL's Overal

Je frontend code gebruikt relatieve paden zoals /api/users. Dit werkt in lokale development, via de tunnel, en in productie. Geen omgevingsspecifieke URL configuratie nodig.

Vereenvoudigd Delen

Deel één URL met collega's, klanten, of webhook providers. Ze krijgen toegang tot je complete applicatie stack via één endpoint. Geen verwarring over welke URL wat doet.

Mobile App Ontwikkeling

Bouw je een mobile app met een backend API? Configureer je app met één base URL. Bij het testen serveert je tunnel zowel de API als eventuele web-based admin tools die je nodig hebt.

Verder dan Frontend en Backend

Path-based routing schaalt naar complexere setups. Een typische development omgeving kan bevatten:

# asd.yaml
services:
  # Hoofdapplicatie
  app:
    port: 5173
    path: /

  # API backend
  api:
    port: 8080
    path: /api
    strip_prefix: true

  # Storybook voor component development
  storybook:
    port: 6006
    path: /storybook

  # Swagger/OpenAPI documentatie
  docs:
    port: 8081
    path: /docs

  # Database admin (Adminer, pgAdmin)
  db:
    port: 8082
    path: /db

Eén tunnel URL, vijf services. Een collega die je werk reviewt kan de app zien, de API testen, de component library browsen, de API docs lezen, en de database checken — allemaal via één link.

Hoe Het Werkt Onder de Motorkap

ASD genereert geoptimaliseerde Caddy reverse proxy configuraties gebaseerd op je asd.yaml. Wanneer een request bij de tunnel aankomt:

Caddy matcht het request path tegen je geconfigureerde routes
Het request wordt doorgestuurd naar de juiste lokale poort
Als strip_prefix is ingeschakeld, wordt de path prefix verwijderd
WebSocket verbindingen worden transparant afgehandeld
Het response stroomt terug via de tunnel

Dit gebeurt met minimale latency overhead. Caddy is zeer geoptimaliseerd voor reverse proxy workloads, en ASD's gegenereerde configuraties zijn afgestemd op development use cases.

Vergelijking: ASD vs Traditionele Tunnels

Scenario	Traditioneel (ngrok)	ASD
Frontend + Backend	2 tunnels, 2 URL's	1 tunnel, 1 URL
CORS configuratie	Vereist	Niet nodig
Frontend API URL's	Omgevingsafhankelijk	Relatieve paden werken overal
Service toevoegen	Nieuwe tunnel nodig	Voeg path toe aan config
Gratis tier	Beperkte tunnels	Onbeperkte services per tunnel
Delen met team	Meerdere URL's te beheren	Eén URL voor alles

Aan de Slag

Gebruik je al ASD? Voeg een services sectie toe aan je asd.yaml en draai asd start. Je path-based routing wordt automatisch geconfigureerd.

Nieuw bij ASD? Maak een gratis account aan en krijg path-based routing out of the box. Geen betaling vereist om je volledige development stack via één tunnel te exposen.

Conclusie

Path-based routing is niet zomaar een handige feature — het is een fundamenteel betere manier om lokale development omgevingen te exposen. Door meerdere services via één tunnel te serveren, elimineert ASD het URL gejongleer, de CORS configuratie, en het environment variable beheer dat multi-tunnel setups plaagt.

Of je nu een simpele frontend/backend app bouwt of een complexe microservices architectuur, path-based routing houdt je development workflow schoon en je delen simpel. Eén URL, al je services, nul gedoe.