Cloudflare Tunnels

Welcome to Syntax on this Monday hasty treat. We're gonna be talking about tunnels, Cloudflare tunnels, what they're used for, why they are neat, and we're just all about getting them set up and and what you might actually consider using a cloud floor or tunnel floor. My name is Scott Tolinski. I'm a developer from Denver. With me JS always is Wes Bos.

What's up, Wes?

I'm excited to talk about this.

We've done a show on exposing your application to the greater Internet Yes. Previously, and we've went through several of the, options out there. You Node, there's NGRC and local tunnel and and whatnot. But CloudFlare Tunnels is kind of in a league of its own because it does it does quite a bit more. And quite honestly, I think it's it's the best, approach to these types of things in terms of, like, running them long term, especially if you have, like, a local server at your house Wes you're not just like, oh, I have a local dev server that I wanna be able to to expose to somebody, but, like, no. I run on I wanna run this thing full time.

So I thought, like, let's do a quick little show explaining what they are, how to use them, the whys and whats, because they're super handy.

But before we do that, let's actually take a a second to talk about Sanity at Sentry Scott I o, perfect place to solve, find any of your bugs. I know we're we're doing a lot of side projects, Wes, and, like, I know you're working on a bunch of stuff here and there. It's always important to know what's going on in your apps, whether that is performance, whether that is, issues that it cropped up.

And, hey, I I was using some of these new GitHub tools to solve GitHub issues with natural natural text. It would be really kind of cool to take a Sentry issue, create a GitHub issue for it, have GitHub solve that thing for you right away, and it's like, click click. Alright. Nice and done. Here's a bug solved. So, check it out. Century.ioforward/ syntax. Sign up and get 2 months for free. You gotta use the coupon code Hastytrade, all lowercase, all one word. And, yeah, this podcast is presented by Sanity. And just like Wes, your websites get kind of presented by Cloudflare tunnels, meaning that you can basically put a Cloudflare tunnel in front of something and then point a domain to it. And then you have basically an SSL into something that is self hosted that's tunneled directly to you your app. Do we first wanna talk about what we might be hosting on, CloudFlare Tunnels? Or not hosting on, but using CloudFlare Tunnels to expose to the Internet? Yeah.

Just give people an idea.

Okay. So there's there's kind of, like, 2 Cloudflare tunnels is not just like like, get your dev server open to the to the greater Internet. That is a very good use case for it. Is it? I have not done that, actually.

Oh, yeah. Yeah. I I did it. So, like, I'll start there. When I did my receipt printer, I was running some demos on my computer where I needed people to be able to send stuff to my receipt printer. Right? And that question of how do you then expose your local dev server to the greater Internet GitHub exposing your home ad home IP address. Right? And so what I did is I ran a Cloudflare tunnel on my local machine, and what that does is it connected to a subdomain that I have, which is local.westboss.com.

And then anyone who's able to visit local.westboss.com, it then pipes all the traffic directly to it was piping it directly to my dev server, my Next. Js dev server, and it held up, pretty well.

That's a really great use case both for if you just want someone to see something, but also, like, the the use case I run into all the time is I have a webhook that I need to test, and the webhook needs to be exposed to the Internet because the webhook has to be pinged by another server. And it it doesn't know how to ping my local local host, right, because it's not exposed to the Internet. Apple Pay is another good one where Apple Pay, you must give it the explicit domain names of what it is you're working with. And if you've not approved, basically, you have to go into either Stripe or into Apple and say, like, Bos is my domain name, and then you have to approve it and and get it added to your account. And if you wanna be able to test Apple Pay, you can't just do that on localhost. Right? You have to have a domain name for that. So in that case, I'll I'll often expose it, to that. I've used Snipkart in the past where that that expects a an exposed one. Anytime you're working with something that needs a web accessible URL, a Cloudflow tunnel is a great solution to that.

Yeah. Yeah. I pretty much exclusively use this stuff for exposing, services that are running locally to the the Internet. You know? Think about, like, we have an MB Vercel to have, like, a media server on. And I wanna make sure that we can access that on the on the airplane or when we're on vacation or something like if we're somewhere and we need to download movies for the kids, it's nice to have that stuff available.

Also have, like, my home assistant or the access to my NAS itself, instead of using QuickConnect. I I have that behind a a Cloudflare tunnel. So I'm often using it exactly for those types of services, the types of things you'd want to access outside of your house. Most recently for me, the audiobook app, that audiobook shelf app that I have, made that available. And I just throw up behind the domain. You get SSL. You don't have to worry about opening ports, and it feels a lot more comfortable. Not only that, but, like, the process of getting a a Cloudflare tunnel up on something like a Synology or NAS is is trivial.

So Super trivial. Like, it's Yeah. It's amazing how much easier it is than some of the other. Like, I had been using Synology's version of this, which is Synology Scott me, and it does this weird reverse proxy Wes, because maybe we should explain. If if you have something hosted at your Node, that is not exposed to the greater Internet because you're you're gonna have, like usually, you have 1 IP address for your your router, right, or sorry, for your modem. And then if you were to visit that IP address, your router is you have to go in, like, forward ports, and that's not necessarily really safe. So what this does is you can you don't have to forward any ports. You don't have to deal with any routers, but it will sort of just forward the traffic on through to you. I use it for, yeah, home assistant. I use it for my jelly fin because I wanna be able to stream our content when we are on the road or we're at the cottage, but the stuff is still at home. Yep. I like that quite a bit because if I have to download something, I can just log in to my Synology and download something on my fast Internet here, and then you can stream it at, like, a lower quality on on the devices on some slower Internet. So I I did that, but then I also hooked it up to my COOLIFY, which is really neat because You did. So COOLify JS, like, kind of like a self hosted Vercel where you can just quickly spin up a whole bunch of different options. And Node kinda cool thing about COOLify is that you can give them each of your, like, Bos' domain names.

And if you give them publicly facing domain names, you I've set up a wildcard on my Cloudflare tunnels so that I can simply just I could spin up, like, a syntax is cool, and then I immediately will assign a domain name to that in Coolify, and then it will be web accessible,

for anyone. I got a question about that. So how are you pointing the DNS then? You're pointing the DNS?

Yes. Let so let's talk about how how you do that. So the the way that you set up Cloudflare tunnels is there's kind of 2 ways. You can do it locally with the cloud flared kind of CLI, and that's the way I initially get into it. And that's the way they give you, like, a quick start. Right? You can type this you can type a couple commands and immediately have a thing running, but I'm gonna tell you don't do that because that's not great long term. And switching to the the other approach, which is remotely managed, is the best approach. So what you do is you get the cloud flared daemon or daemon. How do you how do you say that? I think we've got a I think we determined it was daemon. Day daemon. You get the cloud flare daemon running on the box that if it's your it might be your your local server. In my case, I ran it in a Docker container on my Synology, but then you expose it to the network on the Synology, or you can just run it, like, directly on your your MacBook Pro. And then that daemon is always running on your machine, and then you simply just go into the Cloudflare Tunnels UI, and you can start setting up routes.

And and all I have to do is say star dot I'm pretty sure it's like star.coolify.westboss.com, and then any applications that hit that route are passed to COolify. And then cool at that point, COolify picks it up, and they have their own Mhmm. Proxying

set up so that you it'll say, oh, well, someone's requesting it on this URL. Pass it to to this one. Interesting. I've always just done for COOLIFY, and this is kind of a pain. It's just create a second DNS record for any subdomain or any, yeah, any subdomain pointing to the IP of COOLIFY to get that that custom domain going.

Interesting. That I like the wildcard approach. That seems like way more flexible.

It also depends on if you're hosting COOLIFY on, like, a like, a Hetzner box that is like, the IP address is already out there or if you are like, I'm running Coolify on my my local server just in my house.

Yeah. So Oh, okay. I don't have an I don't have an IP address. Well, I do have an IP address, but you should not be giving that IP address out because, generally, it's not a good idea for anyone to know the IP address of your server, because they can go directly to that and and give you a DDoS. Now you can obviously firewall it and and only allow in certain IP addresses, but, it's generally better to sort of mask that with something like a Cloudflare Wes it will proxy all of the traffic for you. Yeah.

I like raising my hand now. The audio listeners, I raise my hand sometimes so we don't talk over Wes. But you don't have to have, like, a c name for these or what? Because I have to have a c name for each subdomain

that I have even if it's Cloudflare tunnel. Yeah. The the kinda cool thing is that if your domain name is set up with Cloudflare, then Cloudflare takes care of all the all the Deno because Cloudflare is the DNS provider. So when a request comes to your server, Cloudflare if as long as you're proxying it, which is orange clouding, Cloudflare will know what to do with that request and send it to the right, if they the whether it's it's a cached asset or if it's actually, like, a tunnel that it needs to then forward on to you. Okay. Yeah. It's it's it's really nice, and you can just quickly go and you can either add, like, a one off. You say, basically, like, jellyfin.bossfamily.net, and then that will you say, okay. When somebody visits this URL, then point them to localhostcolon 426 five, you know, or or 4498.

And what that does is it will proxy it through to the port, and then you also have the benefit of not having to fuss with having ports in your URLs.

It's just like a nice clean, URL. You can also do, like, subdomains as well. Like, you could do, like, Scott Tolinski .comforward/jellyfinorforward/newblog.

However, I find that when you do, like, subdomains, then you have to get into, like, application specific properties that is, like you know, like, when you try to host, like, a React or Svelte app on a like, a forward slash, then you have to tell the router itself what the base name is, and then it's a bit of a pain.

Yeah. For people looking for this, it's under on Cloudflare in their dashboards under 0 trust, by the way. Yes. It's not, like, under Cloudflare tunnels on the sidebar. It's under 0 trust, which then has a lot of other features. What's shocking about 0 trust is that there's no dark theme, for 0 trust. So even if you're in dark mode, you go to 0 trust, and it's light mode. Yeah. I don't trust people that use dark Yarn mode. It's Yeah. They're hackers.

They're hackers.

One thing that's really cool about these things also that we haven't mentioned is that you can give, like, a lock to to some of these routes. So let's say you want this to be available, but, you know, this makes less sense for something like Node Assistant Wes you're giving it a URL and it creds, and it's locking into that service. But if I have a a service that's a web UI that I'm only ever visiting from the web, you can put a lock on that, which means that only certain CloudFlare accounts specifically can access that information.

And so what happens when I visit those URLs, Cloudflare actually steps in with its own login page and says, you must log in to Cloudflare to access this. And then once I do that, I might still get another login screen from the service itself.

So even though you are exposing, this functionality to the web, it does give a nice bit of protection there in terms of who's even able to even even hit the site in general, not just, you know, try to log in.

So Cloudflare's whole Deno trust thing is, like, this massive product that's it's meant for enterprise, which is Wes have stuff that is hosted, and it needs to be accessible via the entire Internet. However, like, you know, it's annoying that you have to set up the VPN and, like, oh, are you on the VPN before you can reach that? Like, that's Yeah. You don't have to do that. You can simply just make access rules to say, alright. Anybody with this domain is able to access it, or you can hook up to any of the single sign on providers and have or you can simply just give somebody a code. Right? Like Mhmm. That's one thing. It's like, if you do want to expose your local dev server to the Internet, you probably don't want anyone just, like, finding that while you're working on it because there could be sensitive stuff on there. So you could just put, like, a PIN code in front of it, and if you do need someone to to be able to access ESLint. It's kind of annoying because if if that's the case, then you have to write some rules for the webhooks to be able to to go through, but you can lock this stuff down as much as you want even if, like Scott says, even if your your applications themselves already have the like, a login. Right? Yeah. Yeah. Because, like, there's at some point, there's gonna be some sort of security flaw for these applications. You know? At some point, there's gonna be some security flaw in

my photo backup software. Or home assistant. Or, you know, like, you know what? I don't wanna give anybody access to my home assistant. That's for sure. Got cameras in there. Right? Like, I don't have cameras in mine, but, yes, I don't want somebody I don't want somebody messing with my lights. Yeah. Or even simply know when you are home. Right? They could see your Oh, yeah. All that info. Bad. So, yeah, you could you could lock that down a little further

to to get access to it. So it's it's a really cool product.

It's really amazing that at a very low level, just like a guy like me can use it to give cool domain names to my servers, and then it spans all the way to, like, enterprise network IT of locking things down and doing custom routing.

Yeah. I know. It's it's it's a cool Node. It's a cool product that works well, but it's also it feels secure when you use it. I I think for me, personally, when I first started looking into making things like my MB Vercel available off network, and it freaked me out. I'm gonna be honest with you. Because, like, once you get into opening ports and I'm not a a as much of a a network admin that, like Yeah. I know that I'm making the right choices on everything. So being able to use Cloudflare tunnels to me has been, really just a big, big, nice little boost for me Yeah. Feeling more secure about what I'm doing here. So, yeah, it's a it's a cool product.

You should see, like when I log in to my Synology, it shows you when people are trying to log in. Mhmm. And it's it's probably, I don't know, like, like, a a 100 a day, login attempts. Yeah. Yeah. It's it's nuts.

I don't think my name is. There's just bots out there. If you do a search, just everybody's yeah. Those are there's just bots out there looking for Synology login pages and and looking for unsecured you Node, there's bots everywhere, and they will try admin admin and admin puppy and all these things, which is is pretty pretty wild. And, obviously, they never get in because I have, like, two factor authentication and whatnot, but I kinda would like them to not even try because, like, you know that a request is coming into my home and trying to access it. You know?

I know. That freaks me out. And and then if you have, like, the, like, the tunnel lock to make sure that, like, somebody has to hit a lock in before they hit that, then they're not even getting to your home. Yeah. And and that to me feels feels great. Yeah. I yeah. That that whole Synology thing is freaky to me as well.

But, yeah, if I could have that's, like, one of the services. If I could have free FA on it for FA, just give me, like, all the FAs, I would do it. You know? It doesn't. Yeah. I don't I don't need the inconvenience. Node not matter to me. I just don't want somebody getting into my my NAS and deleting all my stuff.

Yeah. Yeah. Alright. I think that's all we have. Certainly, check them out. Grab a Cloudflare tunnel. Try to get a set up like a local dot whatever. Even buy, like, a whole Deno Node domain name. That's there's an excuse for warp. You can buy a new domain name. But Yes. Buy a domain Node for your projects, and then just try set up, like, a local one.

You you can also just proxy other applications as well. Right? It doesn't have to be something locally hosted. It could be an actual application that's on

on a server somewhere as well. Yeah. Don't you just have to you would just have to have Cloudflare

daemon running. That's that's the only thing. Yeah. You have to have that running on your box.

Yep. Word. Cool. Well, I hope you found this interesting, and, let us know what you're hosting on Cloudflare Tunnels. If you use something different, like something else, or you're just not convinced, let us know in the the comments down below. Smash that subscribe button, all that good stuff, and we'll see you in the next one.