DevelopmentDev tunnels in Visual Studio

Verbinden met je lokale API via Dev tunnels in Visual Studio

In de update van Visual Studio 17.5 voor Windows heeft Microsoft ‘Dev tunnels’ toegevoegd. Met Dev tunnels is het mogelijk om je lokale API te port forwarden met het internet om deze beschikbaar stellen voor een tablet, smartphone of met het PowerPlatform. Het is niet mogelijk om zonder gebruik van externe tooling je lokale API (bijv. localhost:44336) te benaderen vanuit bijvoorbeeld een zelfgemaakte connector in PowerAutomate.

Je kan ervoor kiezen om je API naar een App Service op Azure te deployen. Het nadeel hiervan is dat je misschien nog niet zo ver bent om je API te publiceren naar Azure of het betreft een proof of concept die helemaal niet gedeployed hoeft te worden. Hier is Dev tunnels de perfecte oplossing voor. Wanneer je Dev tunnels activeert in Visual Studio zal zodra je web applicatie opstart een tijdelijk (of permanente) URL aangemaakt worden. Via deze URL kan je de lokale web API benaderen vanuit externe systemen of apparaten.

Hoe werkt een Dev tunnel?

In Visual Studio zal je Dev tunnels eerst moeten activeren via Tools -> Options -> Environment -> Preview Features en de volgende optie moeten aanvinken ‘Enable dev tunnels for Web applications’.

Verbinden met je lokale API via Dev tunnels in Visual Studio

Vervolgens zal je het window eerst zichtbaar moeten maken, dat kan door te zoeken op ‘Dev tunnels’ of via View -> Other windows -> Dev tunnels. Wanneer je hier op klikt wordt het window geopend.

Verbinden met je lokale API via Dev tunnels in Visual Studio

 

Een Dev tunnel aanmaken is vrij gemakkelijk. Klik hiervoor op het groen ‘plus’ icoontje of op ‘Create A Tunnel’. Een extra scherm zal worden geopend zoals weergegeven in onderstaande afbeelding.

Verbinden met je lokale API via Dev tunnels in Visual Studio

Je krijgt enkele opties voorgeschoteld, als eerste geef je de tunnel een naam om deze herkenbaar te maken in het overzicht van Dev tunnels.

Vervolgens selecteer je het type tunnel die je wilt aanmaken. Je hebt hier de keuze uit een tijdelijke of permanente tunnel. Zoals de naam al weggeeft zal een tijdelijke tunnel iedere keer dat je je lokale API opstart een nieuwe URL krijgen. Een permanente tunnel zal zijn URL  behouden na een herstart van je API. Een uitzondering is al je de tunnel een lange tijd (weken) niet gebruikt, dan veranderd de URL na het opstarten van je API.

Het laatste veld geef je de toegang aan, om je lokale API af te schermen van derden kan je deze beveiligen. Wil je dat alleen jij (hiervoor wordt het gekoppelde account in je Visual Studio gebruikt) via de tunnel toegang hebt tot de API dan zal je moeten kiezen voor een ‘private’ tunnel. Het kan natuurlijk zo zijn dat je met een collega samenwerkt en er meerdere mensen gebruik moeten maken van dezelfde tunnel. Dan kies je voor de optie ‘Organizational’. Deze optie staat toe dat iedereen die binnen dezelfde organisatie valt toegang heeft tot de ontvangende kant van de tunnel. Bepalen of een account toegang heeft gebeurd door te controleren of dit account binnen dezelfde Active Directory valt als het account dat de tunnel heeft aangemaakt. De laatste optie is om je tunnel voor iedereen open te stellen, hiervoor kies je de optie ‘Public’. Dit is echter niet aan te raden, al helemaal niet als je geen authenticatie op je API hebt staan. Kwaadwillende kunnen toegang krijgen tot gegevens van de API die je openstelt.

Wanneer je alle velden hebt ingevuld kan je de tunnel aanmaken door op ‘Ok’ te klikken. De tunnel wordt nu aangemaakt en zichtbaar in het overzicht.

Verbinden met je lokale API via Dev tunnels in Visual Studio

Gebruik maken van de Dev tunnel

Je hebt een Dev tunnel aangemaakt en nu wil je hier gebruik van maken. Dat is makkelijk te doen door bijv. je web API op te starten in Visual Studio. Je Dev tunnel wordt dan automatisch ook opgestart.
De status van je tunnel zal veranderen naar ‘Started’ en de URL(s) van je tunnel zijn zichtbaar in het overzicht.

Verbinden met je lokale API via Dev tunnels in Visual Studio

Wanneer je hebt gekozen voor een tunnel met het type Private of Organizational zal je eerst moeten inloggen met een geldig account.

Na het aanmelden krijg je eenmalig een informatie pagina te zien dat je gebruik maakt van een Dev tunnel. Op deze pagina zal je op ‘continue’ moet klikken om de dev tunnel te activeren voor gebruik.

Verbinden met je lokale API via Dev tunnels in Visual Studio

Je Dev tunnel is nu klaar voor gebruik! Waar je in het verleden aparte tooling nodig had zoals bijvoorbeeld ngrok kun je nu gebruik maken van de ingebouwde Visual Studio functionaliteiten.

Mitchel Hulst, Software ontwikkelaar

  • Wil jij ook dagelijks Mederne Applicaties bouwen? Bekijk vacatures!