Imagine a world where you wanted to securely share your local web services
across the internet, you know, to like connect to your local dev machine,
test out cloud services, share your work in progress with your colleagues,
maybe even developing web hooks.
Well dev tunnels are here with a brand new C L I.
Then you can use from any coding environment, tune in.
Hey everyone.
I'm James and I'm back with another video talking about some awesome
developer productivity tools.
This one is again, all about dev tunnels.
In a previous video, I talked about dev tunnels inside of Visual Studio 2022.
I demoed a way of building a web api, which usually is just running
on local hosts and then using a dev tunnel to tunnel your way.
Into that local host and expose it to the internet.
So you could go ahead and debug it locally, like on an iOS or Android device.
Share your work in progress if you're working on a website or again, like
working on, you know, like different web hooks or things like that.
This is a common practice, uh, especially when developing web APIs.
Uh, but also when you're doing things like teams development or other
software development that needs to talk to your local host, but needs to.
Easily access those things over a publicly accessible U R L, and sometimes you need
like cert certificates and other things like that to make it possible to work.
And that's where dev tunnels come in.
What's really, really cool is that Dev tunnels are now available
via the developer c l I that you can use on Windows, Mac,
Linux, or anything like that.
So let's go ahead and check it out.
All right, so devs are available and you can check 'em out right here on
the documentation, which I'll put in the links below, and all you need
to do to get started is install it right here or just download the xe.
Basically it's just an XE that you download.
So there's instructions here for Mac and Linux, and then you just log in.
You can log in with your Microsoft account or GitHub account
or anything that you need.
So let's go ahead and check it out.
I've put it right here in my tools directory.
And we're gonna go ahead and just open up, uh, PowerShell script here.
You can do C L I a PowerShell, uh, terminal.
It doesn't matter.
However you wanna access things, it doesn't really matter.
Uh, so after you have it installed, which I have it here,
uh, we can go ahead and see.
I have dev tunnel.
And the first thing you'd want to do is do user login.
When you log in, this is gonna basically allow you to manage for
your account all your dev tunnels.
Now I've already done that, so I can just say, show here and, uh,
this is gonna show my account, which I'm logged in a hundred percent.
It gives you all the licenses, blah, blah, blah, blah, blah.
Uh, there.
So lemme just go ahead and clear that out.
Boom.
Alright, so what does it mean to have a dev tunnel?
Well, let's start with the basics, right?
So if I just do a dev tunnel here and I say Echo, h e t p.
Here and yeah, do slash P 80 80.
This is basically gonna create an H E T P.
Echo, uh, port for me here, a service here to listen to.
So we're listening here.
Here it is.
If I go ahead and open this in a browser, we can see that it's gonna echo whatever
my call is to this port to port 80.
80.
So we see I'm doing a get, it's doing a bunch of information here that I would
expect coming back and echoing that there, but that's just on 1 2 7 0 0 1 port 80 80.
What if I need to actually test that out?
Well, that is where we can use a dev tunnel.
So I'm gonna come back into terminal, go to another tab.
I'm gonna do dev tunnel here.
I'm gonna say host Now.
Host is gonna enable me to host a port, so I'm gonna say dash P 80 80.
This is basically gonna create a dev tunnel.
Hosting it on the local host of Port 80 80.
So here I'm gonna go ahead and spin it up and we can see that it's connecting
to the host tunnel relay service.
It's gone in and connected on port 80 80 and it's given me this identifier,
R Z 8 75 D V H basically here.
So here I can go ahead and now open this up and this is gonna enable me to connect.
There we go.
And now we can see that this is my exact same machine and the same service.
Echoing back this information here, which is cool.
So here we have that, um, same information on 80 80, and we have
the same one over here coming in.
Now.
There's much more information coming in because this is obviously
going up and then tunneling back down, uh, across the wire.
But what we can see is that this is.
Pulling up and giving us the same information back.
So that's pretty cool.
So really, really straightforward and it's just listening, echoing
back and doing its thing.
Now if I come over here and I do a dev tunnel list, uh, this is gonna show us
all of our dev tunnels that we have, uh, that are running on our machine.
So here we can see, we're gonna zoom this out.
We have one host, um, this is the, the dev tunnel id, and that's it.
Now if I go ahead and stop these, cause we don't really need them anymore, we can
go back over to our list and we should see that we have zero dev tunnels, right?
So these are sort of temporary dove tunnels that I'm creating in this state.
Now, there's many, many options here, and by default it'll create a
dev tunnel that will automatically have authentication built in.
But there's a lot of options that you can.
Go ahead and change the ports that it's obviously set on.
You can change the authentication model, uh, and you can even
create sticky ones too.
So let's see what this means in practice.
Right?
So let's actually use a dev, uh, tunnel over here.
So I'm gonna go into VS coat, and over here I have, uh, my monkey
endpoints that are running over here.
So this is just a, um, a.net api, but this could be any api, anything
that you're running, uh, over here.
And when I hit run, this opened up the browser and it's running
my Swagger UI over here on 7 1 64, which is the HT t p s version here.
So when I go ahead and refresh this, I can go ahead and hit my get, try
it out, and go ahead and get my monkeys back, which is pretty nice.
But again, this is on local host, so what that means is if, for example, I am over
here in Visual Studio and I have, uh, you know, a Donna Maui application and I
have some views and I have, uh, my main page over here and I have all my monkey
data and I have this monkey service.
And it's going off and it's trying to hit that local host.
It's gonna work fine out Windows, but not on Android.
If I say get monkeys, it's gonna throw an exception because
a local host is not found.
I can't do that.
Port tunneling from the Android emulator to my local machine, which
is where a dev tunnel comes in, right?
Okay, so now let's say that we want to go ahead and expose this port and my web api,
so my mobile application can talk to it.
I'm gonna say slash dev tunnel and I'm gonna say host.
And here I'm gonna say port 71 64.
I'm gonna give it a protocol as well of https s And what that's gonna
do is basically serve this up and enable me, uh, to connect to it.
So here we're gonna say that this is hosting this port.
I can go ahead and tap on it here.
It's gonna log me in and then it's gonna enable me to continue.
So automatically here I'm connected and I don't have anything in the defaults.
Let's go to swagger and sure enough, this is now gonna load up Swagger,
talking to my local host, right?
So if I come into VS code and I actually put a break point
here, right on my monkey, this is running locally on my machine.
I could come back into the Swagger ui, say, try it out, hit execute.
And what we'll see is that we hit the breakpoint inside of VS code.
So we're actually calling that on the local machine, even though my
URL is this dev tunnel url, which is really, really, really cool, right?
So now it's exposed, but I was logged in.
Um, so that means that I am authorized user's dev tunnel and I could.
Use that on my mobile app, but probably what I actually wanna do
is create an anonymous one for this instance that is gonna enable me to
put that into my backend so I don't have to worry about authentication
of this dev tunnel to test it out.
So let's go ahead and create that over here now.
So I'm gonna go ahead and stop this one.
Okay.
And if you wanna just see, uh, if it's still running here, we
can do list and we can see that it shouldn't be running anymore.
So let's clear it out.
And I can use that same exact protocol, but then I can say allow anonymous.
There we go.
This is gonna create another do tunnel with that port, but this time anonymous.
So when I open this up, it's gonna go right to the screen,
no log in, no anything.
And when I say slash swagger, Sure enough, it is now good to go.
So what this means is I can take this.
Endpoint here that we have.
So I'm gonna go ahead and grab it here.
I'm gonna go back into Visual Studio and I'm gonna go ahead and paste it over here.
All right, I'm gonna hit save and I'm gonna hot reload this
into the Android application.
So now when I go ahead and get monkeys, it's gonna call off to my A P I, which
we can see hit the break point here.
Now it's gonna return that data back into my mobile application cuz it's
hitting that dev tunnel and loading that from my local machine, which is P.
Pretty awesome, right?
And this enables me to be doing this on other machines or
asking my backend developers to expose this out to the internet.
All right.
Now here's the one problem that I have is that the default
settings here for this dev tunnel.
When I go ahead and close it down, if I list it out, Are gonna be gone, right?
No tunnels are found.
That means if I create another one, it's gonna give me another new url,
and then I'm gonna have to update my code, but we can actually create one
that is sort of sticky and persistent.
So let's go ahead and do that.
I'm gonna do slash dev tunnel in the api.
I'm gonna say create, I'm gonna do dash A over here and what we're gonna see is
dash A is anonymous, and then I'm gonna give it a tag of my monkey a p i, and,
and that's sort of optional here, but it's gonna create this one here, and it gives
me a default tunnel of R 25 px, blah, blah, blah, and an expiration of 30 days.
So we can see the access control.
Is this.
Now.
Right now there's nothing connected and I haven't really specified the port either.
So what I'm gonna do now is give it a port.
So I'm gonna say the tunnel and I'm gonna say, uh, port create dash P of 71 64.
And again, the protocol.
Call of https s.
There we go.
So this is now going to assign it.
So here we can see that we now have this port, this port number,
this protocol, and it is anonymous.
So now all I need to do is dev tunnel, host, just like that.
And it's gonna say, oh, what dev tunnels do I have?
I have one.
And right here I can open it up, connect to it.
Slash swagger and just like that, I now have this persistent one.
So check this out.
If I go in and I stop it and I host it up again,
and I come back and I refresh this, it's still running, right?
It's still there.
So check this out.
If I stop it.
Clear this out.
Go to list.
This dev tunnel is gonna be created there.
I can manage it, I can update, I can create all the things.
And here it is.
This gives me this exact endpoint url.
So if I host this up, we'll have it running.
And the last thing I wanna show you is that there's also
this dash inspect over here.
So when I come over here, I don't need slash redon.
If I just go to it, it's gonna actually give me dev tools for the tunnel.
So here I can go ahead and go ahead and reload this.
We can see that there was a index swagger that came in here, which is nice.
I can go in to my monkey api, try it out.
And what this is gonna show me is that if I go ahead and
go ahead and with this a p I.
Come back over here into my dev tools that it's gonna show me everything
that was happening right here, right?
So we can see that index was loaded, swagger was loaded, then the monkey
was hit as well with the endpoint.
And it's gonna show me everything coming in.
So if you wanna d debug the, the network requests that are coming in, the different
headers, all that other things, you have access to that with the dash inspect.
So the only difference between this U R L and this U R L is dash inspect in
there, which is really, really cool.
Now I wanna point out that over in the dev tunnel, uh, reference material,
there is a whole bunch of things in here.
So a bunch of global options.
Um, how to host a tunnel, connect to a tunnel, manage tunnels, manage p tunnel
ports, and manage tunnel port access and tons of different commands and echoing
and pinging and all this other stuff.
So it's really, really advanced.
All right.
That is Dev Tunnel cli in the nutshell.
Of course, if you're using Visual Studio 2022 in Windows, it's built in, so you
can actually just debug, create them all from Visual Studio, which is really cool.
But if you're over on, um, command line, you're using VS
Code, you're on a Mac, you're on Linux, you can use this anywhere.
It's so cool to see Dev tunnels light up absolutely anywhere.
And this beautiful a p i creating persistent tunnels.
I love it just easily from any command line.
All right.
That's gonna do it from this video here.
Hope that you enjoyed it.
Make sure you check out my other video that I talked about earlier, all about
dev tunnels in Visual Studio 2022.
If you have any questions, let me know in the comments below.
What do you think of this tool?
Are you gonna use it now that it's a command line?
And if you are, let me know what you think.
If there's other tools you want me to try out, drop them down there as well.
All right.
Well thanks for tuning in.
Don't forget to subscribe and jam that notification button over there.
Uh, so you get notified every time I put a video.
Oh, and like it too.
Why not like it while you're down there too?
Helps other people find the video.
All right, I was gonna do it.
Thanks for watching.