CAROLINA URIBE: Hi everyone,
thanks for joining.
Today we're talking about
dev tunnels and how you can use it to
securely test and debug your web apps and webhooks.
My name is Carolina and I'm
the Product Manager for dev tunnels.
JAKE FULLERTON: Hi, I'm Jake. I'm a dev
on the dev tunnels team.
CAROLINA URIBE: For today, I will just give
a very brief overview of what is dev tunnels.
I'll share some really exciting announcements,
and then Jake's going be doing two demos,
a Github webhooks demo,
and a web app demo,
and then I will wrap everything up with some takeaways.
Throughout our presentation,
if you were wondering how do I get started,
where is the documentation or where do I submit issues?
I'd recommend scanning this QR code now or just
go into the aka link that will take you to our link tree,
which has all of
those links that you might be looking for.
Dev tunnels is a really powerful way to
securely connect your local endpoint
to a public endpoint.
This is to enhance your productivity when you
are testing and debugging the webhooks,
web apps or APIs,
and today I want to highlight
a few different ways we
see our customers using dev tunnels.
The first is testing a web app on
other devices like a mobile phone or a tablet,
and there's of course, other ways to do that,
but dev tunnels makes it so easy.
You get a dev tunnel URL and you can just
access that on your physical device for testing.
You can also use dev tunnels to test an app with
external services like Power Platform connectors,
Azure communication service APIs,
Teams apps, or GitHub webhooks,
and so much more.
You can also use dev tunnels to
share in-progress work with others,
so let's say that you're working with
a client and you just want
to share with them the current, latest updates.
You can create a persistent dev tunnel URL,
send them an email with that URL,
and at their own time later that day,
let's say, they can access it.
Or if you were at
a hackathon and you were
demoing what you built over the weekend,
you can create a QR code and when
folks pass by your booth, you can tell them,
scan this QR code and you can see what's
running on my local host for yourself.
Dev tunnels is not new,
it's fully integrated and built into Visual Studio,
and it's been in public preview for
these past few months.
We have just been getting so much feedback
of how easy it is to
get started and to use dev tunnels in Visual Studio,
but today we're so excited to announce
it is now generally available,
which means you no longer have to enable it in options.
It's simply in the debug drop-down.
As we hear from all of you,
we hear that we love this experience in Visual Studio,
but there are scenarios where I would like
to create dev tunnels outside of Visual Studio,
so today we're also really proud to
announce the dev tunnel command line interface,
and with our CLI,
you can do just that.
You can create and manage
your dev tunnels outside of Visual Studio,
and this is in public preview
and there are links to our docs
for VS and the dev tunnel CLI right here,
and also in that QR code you scanned earlier,
there is a link to a GitHub repo where you can submit
issues or feedback or
anything you want to share with
us about the dev tunnel's CLI.
As the product manager of dev tunnels,
I of course want to be notified as
soon as possible when a new issue is submitted,
so I was chatting with Jake,
if there's a way we can do that,
and right now he's going to walk
through how he set that all up using
GitHub webhooks and dev tunnels so I could be
texted when a new GitHub issue is open in our repo.
JAKE FULLERTON: Hi.
I'm going to show how we can set
up a locally running server with GitHub webhooks.
First, I've been doing some local development and I have
a local HTTP server that's listening on port 4567,
and whenever it gets a request,
it's going to send Carolina a text message,
so I now I just need to set this up with GitHub webhooks.
We can go to the repo where
we want to create the webhook,
go to Settings, Webhooks,
and add a new webhook.
Now, we need to give a payload URL.
I have this server running locally,
which means I just have a local host URL,
so I need to get something that GitHub can connect to.
That's where dev tunnels comes in.
Let's go over to CLI and create this payload URL.
The first thing I need to do is login.
I can do this using dev tunnel user login
and then the -g flag,
since I want to login with my GitHub account.
Now we can see that I'm logged in,
and I can create the tunnel using
the devtunnel create command.
Now, we need to add the port that we
want to use to connect to the local server,
which is port 4567.
We can do this using devtunnel port create -p 4567.
Finally, we need to give this port
anonymous access so that GitHub webhooks can call it.
We can do this using the devtunnel access command,
devtunnel access create,
and then, -a flag for anonymous access.
Now that all that's done, we can go ahead
and host the tunnel using devtunnel host.
This is going to give us two URLs.
One URL where the port's hosted,
and one URL where we can inspect the traffic,
but more on that later.
For now, let's just take the hosting URL.
We can go back to the webhook
and paste that in the payload,
and we're listening on the /payload endpoint.
We can update the content type,
and we want to hear about all the events
that happened on this repo,
we can go ahead and create this webhook.
Now, let's create an issue to
test the delivery of the webhook.
We can create an issue called test issue,
submit it, and
let's go back to settings to see what happened.
We can go back to the webhook
and see the two recent deliveries.
The first is a ping event
when we first opened the web hook,
and the second was when we opened
up a new issue, and now,
going into Carolina, we can see that she just received
a text message from
our local server connected to the GitHub webhook.
CAROLINA URIBE: Sweet, so now I will know
every time a new issue is submitted,
I'll be texted as soon as that happens. Thanks Jake.
JAKE FULLERTON: This is
just a great example of how you can
use dev tunnels to connect webhooks
to your local environment so you don't have to
deploy your code to test webhooks.
Now let's move on to the second demo where
we're going to show how we can use dev tunnels to
share our code with
another co-worker or a friend
just so they can test our app.
Now moving on to our second demo,
I'm going to show how you can use dev tunnels to expose
your local projects so that
co-workers can connect to them.
Here I have a local web app that
just allows you to vote on your favorite pet.
As we can see, I'm hosting it and we can connect to
it on port 5080, and 7080.
Let's use dev tunnel CLI to create a public URL.
I can do this all in one command using devtunnel host,
and then the port number that I want to connect to,
which is 5080,
and then the -a flag so that we give
anonymous access to this tunnel
so that anyone can connect.
Once I run this, I get two URLs.
The first one is the hosting URL
where I can connect to the tunnel
and the second one is the URL
where I can inspect the traffic.
Let's open up both of these.
The first thing I see when I connect to
the tunnel is a warning page letting
the user know that they're connecting to
a developer tunnel and not a production resource.
I can just click "Continue" on
this and we won't see it again.
Now, I can open up a QR code that
Carolina can scan and she can start voting.
CAROLINA URIBE: Got it.
I'm going to start voting now.
Jake, I'm voting for cat right
now and the counter is not increasing.
JAKE FULLERTON: That's weird.
I keep refreshing
the page and I see all the votes for capybara.
It looks like you just really like capybaras.
Let's check the inspection page and see
all the requests that are going through the tunnel.
Wow, it looks like
the cat handler was hit a bunch of times,
but we don't see any votes for cat.
There must be something wrong with
our code. Let's go check it out.
As we can see here,
this is what happens when cat's voted for,
and it looks like there's a bug where we're always
incrementing capybara instead of cat. Let's fix that.
Now we can restart our application,
and once it's done building,
since we're using a dev tunnel,
Carolina can use the exact same URL and continue voting,
and hopefully we can see the new changes
on our app are correctly reflected.
CAROLINA URIBE: Sweet.
JAKE FULLERTON: Looks like the votes for
cat are coming in now.
That's just a great example of
how you can share your code with
co-workers and you can use
the inspection page to debug issues.
Now back to Carolina with some closing thoughts.
CAROLINA URIBE: Thank you, Jake. I'm glad
the cats were able to get their votes.
Thank you'll for joining us today.
We just want to wrap up with
a couple different reasons
why you should use dev tunnels.
The first is, dev tunnels is secure by default.
When you create a dev tunnel it is only accessible to
you unless you specify otherwise.
In the second demo, Jake decided to allow
anonymous access so I can go in and vote.
We also support persistent URLs
for scenarios that need to keep the same URL,
so if you're developing webhooks or if you simply want to
keep the same URL when you
close Visual Studio and re-open it.
We also support multiple or simultaneous ports
on a single tunnel at the same time,
and we have global service availability.
Tunnels are always created in
the closest available region.
For example, right now,
Jake and I are in Seattle, Washington,
and if you noticed the tunnels he created,
we're in West US.
Finally, we also have tunnel inspection,
so you can inspect traffic that's sent across the tunnel,
which is just really helpful for debugging like we saw in
the second demo when
the cats were not getting their votes counted,
it was going towards the capybara has we're able to
discover that through tunnel inspection.
That's all for today.
Thank you'll for listening,
this and the QR code from earlier.
If you messed it, it brings you to our linked tree,
which has a link to
our documentation and our GitHub repo
where you can submit issues,
and we just look forward to
seeing how you can use dev tunnels
to enhance your productivity when you
are testing and debugging your web apps,
webhooks and APIs.
Think that's
all.