SSL Certs, Approvals and Cloudflare

I was moving it over and I said, okay. Like, I'm going to,

Regular node applications. They are only serverless. And my my course platform is not serverless. It's it's a regular node app. That's the same with yours too. Right, Scott? Correct. So, Much of your bandwidth

every time you have a git commit, Cloudflare first and then to the service.

I want to move my hosting over to render. That's the same same place Scott does. And you could do a c name for where you can just you can you can point out a domain instead of an IP address, which is It's just a solution.

Hey, everybody.

the tastiest web development treats coming again hot. Here is Wes Barracuda

Boss and Scott

You can also see errors and bugs. Basically, if your users on your site are utilizing your website and you want to understand

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

the craziest,

Sign up, and you'll get 14 days for free modern front end monitoring and product analytics. We are also sponsored by Prismic

Monday. Monday. Monday.

about it. Your user's behavior because they now have all sorts of behavior tracking and things like that where you can see heat maps.

and it's also the the perfect place to really get an understanding

with these SSL certificates? What are we doing here? There's so much complex stuff going on, and many of it just kind of happens automatically for you. So my name is Scott Skolinski. I'm a developer from Denver, Colorado. And with me as always is Wes Boss.

It. LogRocket is the perfect place to see all of your exceptions and errors happen in a scribble video replay, able to help you, which is nice. It. So Yeah. Render added PNPM support because I tweeted about it. There you go. It'd be amazing. Yeah. They had it in, like, 24 hours. The what are their pinpoints, what are their their it. Nice things that are happening with the users.

This episode is sponsored by 2 amazing companies, Prismic and LogRocket.

your project data types. So you can create as soon as you turn the gray cloud or the orange cloud back on, But So So must be served insecurely over port 80.

It. We're gonna be talking about SSL certificates, approvals, and Cloudflare. Basically,

CSD. Welcome to Syntax. In this Monday, hasty treat.

as well as paid SSL certificates. So what is the process here of utilizing tools like Cloudflare

You get all the things that you would love to see when you're debugging issues like the network requests and error logs and more. So check it out at logrocket.comforward/syntax.

get either a GraphQL or REST API, So that's how let's encrypt works.

we have a lot of components now on the web, and we also have a lot of free generated SSL certificates

Where are they engaging with, and when are they hitting roadblocks? You're gonna want a tool like a LogRocket because it gives you a video replay. That's right.

And then out the other end, You get 2 things. 1, you get a whole UI URL redirects. They just remove them entirely from the platform because which is really good if you want to save money on bandwidth. They give you really good stats, which is nice because if you don't want to run, which you can query For your pages and all your data types and all the relation, and then you just start looping over the data and put it into your Next. Js, your Gatsby, Nuxt, anything service provider, which is true. You're pointing it at Cloudflare, not not the actual service. Right? The other one is that they don't get the money from the bandwidth.

create your pages. It's kind of like a little site builder because you can click all these data types together in 2 pages, and then you, the developer, the solution was is great cloud it turn off Cloudflare, donkey, So you just have to, like, live with these ugly errors. I'm sure they'll update that UI to make it more clear at Prismic Dot io.

that is able to consume an API, which is literally everything. So check it out at prismic.

Hey, Wes.

Hey.

if if y'all are Have your ad blocker on level up tutorials. Please turn it off because we do not have we don't have ads. We're we're not gonna track you, but we do want to see your errors and exceptions. Yeah. That's for sure.

literally everything.

And then they will do caching and redirects and DDoS protection and SSL certificates and all that stuff that we just talked Right? They proxy your entire application. So the problem that I ran into, and this is I run into this often, is that these pass platform as a service, They don't like when you use Cloudflare. Do you want the the floating IP thing is a big big part of that, right, where they don't have A static IP assigned to them. The IP is, like, kind of changing all the time. Yeah.

your traffic and your actual server, I was running Cloudflare. We'll talk about what that is in just a SEC.

It gives you country headers, which I said I use, page rules, which is really nice. You can you can do, like, specific URLs. You can turn SSL off. You can block certain countries. You can block certain, like a screenshot and your actual hosting provider. So Cloudflare will generate a certificate. And instead of using Let's Encrypt to, that that of whatever crazy, So if you want, And then there is Cloudflare, which is like, what is Cloudflare? Cloudflare is a service

And you don't have the infrastructure in place to create that custom URL because an email being like action needed.

That offers many, many things, probably the most popular being DDoS protection. They're and it's the ability to do What's called the top level c name. I mean, like, c names are usually for subdomain names, Cloudflare. They don't want you to, but it will work this way as well.

Or at the very, very basic, if you want to say go to westboss.comforward/, has a a way to upload it, but it wasn't working. Render doesn't have anything for this at all. So second one, You actually put it there. Right? Yeah. And then the second way is if you don't have access to that domain name or and this is this is a question I always had is, how How do you set up an SSL certificate So I haven't tried that yet just because I'm I'm A little bit scared too.

and it was working great for about 6 months until the cloud app

what happens is when you have Cloudflare on, when you're proxying it, it's called orange clouding it, Meaning all your traffic goes through Big orange cloud. You know, like, oh, hey, guys. Then or modify it, which is really nice. So I did that, Remember this? Sorry.

You can roll back. It cuts over to live deploys, for you.

nice logging, all those things without having SSH into a server and run that all yourself. Right? So, like, I kind of want to have my cake and eat it too.

you can offload is expired. And they said, no, no, no, you're you're in their UI was confusing. So they said this is valid confusion, but

A whole bunch of features, specifically direct image embeds, I've been in that camp for a while, and unfortunately, I had to go this week. I had to go down the rabbit hole of figuring out how does this all of this stuff actually work. And to render, it will immediately try to it does 2 things. At first, it tries to

That's one of the issues is that if your IP is constantly changing or they don't have a load balancer that is your your one IP address.

Change up, redirect, whatever it is you want to do, and then continue on to the hosted service if your service has already figured out a lot of the stuff that CloudFlare does, That is unnecessary.

So there was that problem with render.

one dirty little secret is you can put Cloudflare in front of services that charge you for bandwidth, That the SSL You want that traffic to be encrypted.

And they say, like, no, we've got it figured out. Don't put anything between your user and us. We're going to figure out where the servers go. We're going to figure out How to what to cache, how to get it to them the fastest. And then if you put this big orange cloud, it'd be to fooling us and your user And I'm pretty sure Right?

And they couldn't renew it because they couldn't

There are ways around that where you can you can set up a for and I use that country header to detect which country you're coming from, and then I offer up discounts for some countries that, well known.

And then I also CloudApp is another one. This is not a hosting provider, but CloudApp is like a,

You never know where where the breaking point is. Is it how the things are connected, or is it one thing in the middle that's broken? Is there, like, is there a connection in between it. Somewhere that's going wrong, or is it something that is incompatible with something else somewhere down the road? Yeah. Definitely makes it more tricky. More variables there. Exactly. So I'm in this, like, spot where I want Cloudflare because I like all the services, but I also want the niceness of using a platform as a service that Generates my builds.

add in some CSS, And they intercept

They top level c name. It's called was it c name flattening,

you it's called the HTTP challenge,

Yeah. Remember that? The ice bucket challenge from, like,

It's good because now I have, like, They're being abused or they cost too much bandwidth. So what I did is I'm I wrote a little CloudFlare worker that sat in front of my cloud app and just, like, I just coded those features back in Because you can that's video. This is such a West thing. This is very West. This is peak West. Yeah. That's beautiful because you have a hosted service.

How do you generate the SSL certificate before you cut over? Because you don't want to have that, like, 1 or 2 minutes of good examples but the how let's encrypt works. Let's talk about how Cloudflare works, and then let's talk about the problem and how you how you solve it. So I think this is kind of interesting. Yeah. If you're, like, unsure And I said, like, I was like, guys, is broken again. No, no, no, no. It's fine.

And they'll give you a token and you put it in there and I'll say, I will check for that token. Oh, you put it there. Okay. You must own this domain name. You put it there. We told you to and you did. So okay. Either one of those, now you own it. Right? What about the ice bucket challenge?

downtime where you don't have SSL certificates. Everyone will freak out. Yeah. Because it will say that this site is not secure, and you'll get all these people who don't, you know, necessarily know what that message means and saying, oh, no. This site's gonna steal all my stuff. Exactly. And the answer That is is a DNS challenge where you can set a I believe it's a text record

so we did it on our deck. Yeah. Oh, man. That was that was back in the day when everybody was on Facebook and just posting stuff. That's good. Yep. Yeah. Posted that on Facebook. That's where we did it.

on your server at this specific URL, and we'll check if it's there. And if you put that If you put that there, we'll say, all right, you must you must have access to the server and this domain name because you put in order to And I actually use pieces of Cloudflare as part of my application.

Anyone can get SSL for any domain name. And when you want an SSL certificate

scott.com.

I have much more confidence in understanding figure out that you own the domain name because and they do that because you've pointed it at their servers.

they have to So I am doing a bunch of updates to my course platform. And When when you add a domain name to, So

on your domain name. It's kind of a little piece of metadata you put in your DNS of your domain Ideally, what needs to happen is you You want what's called full SSL encryption, meaning that between Cloudflare and your server, for being able to you kind of just set it up and cross your fingers and hope it doesn't work. And the headless CMS. We developers call them. They say they make your website editable for the entire team. So the way that Prismic works is you sign up. You immediately are able to start creating Which means that it says just put this file point it towards your domain name because that makes me a little nervous pointing

pre COVID times, like, 200 years ago? Oh, yeah. That was a good good did you ever do the ice bucket I did. Yeah. I did. I did do the ice bucket challenge. Yeah. I got called out on it, by my, sister-in-law,

It seems like it's,

domain name.

Secrets. Yeah. Web dev,

HTTP first prove that you own that domain name, and these are called challenges.

And then you set up an a record The challenge, like the the special URL on your server, you must that must be served over HTTP, validate the HTTP request,

Hey. What about your 8 a record as well? Do you have anything for your a record? Yeah. So the

for your your top level domain name, and that points to And then turn it back on. So this was the actual solution with render. I was I was So when you say, okay, and all those custom rules and all that stuff. But I was like, no, They're they're changing the IP of the machine that and then turn the orange cloud back on. And I was saying, okay. But what happens when you need to renew it? Because it's just going to break in 3 or 6 months when that certificate They have a really good landing page there. It's really funny, and they have lots of good Renew themselves automatically without having to turn Cloudflare off. So So

tools of the trade secrets of the trade here. This is pretty neat because I didn't know this, and and I did. I just I I I tweeted about in 20 or or wherever. I read the documentation that just says just gray clouded. I gray clouded it. That was the end of that. But I appreciate you saying, it. That's not good enough for me. I would like I would like the orange cloud, please, and you went out and got it. You know what? And the funny thing is is that

could have been. Yeah. You know what? I'll just create cloud. It'll be okay. I'll lose stats

And point it towards your,

So you you the what what do you you have an a record, or you have a flat c name? I have an a record. I intermediary that is trying to do more stuff in the middle. You don't necessarily know what that is. You don't you don't have insights into it. So Yeah. When there's enough it. Fences in between something or pathways in between something. It it it also gives people an excuse to say, like, Not my fault. You have all this other stuff going on. It could be anything else's fault. And that I mean, it is valid because, you know,

And don't forget to subscribe in your podcast player

Alright. Cool. Well, this has this has been pretty illuminating for me. I I'm pretty into this. I'm being illuminated by an orange cloud now, and so far, so good. Who knows?

it it came Even when I was gray clouded because render gave it to you because they use Cloudflare. So I

Head on over to syntax.fm

but you can do what's called c name flattening with CloudFlare.

things in your DNA. You set up a c name for w w w, and that goes to your render ASN, like certain ISPs if you need to. If anything is happening, you need to quickly jump in.

And then you go into render and you wait for the cert to be issued, and then you go back. That takes a minute or so. And then you go back to Cloudflare and turn your orange cloud back on. So you're you're not orange cloud. Of the a record and c name. For both of them. Yeah. Exactly. So you're without orange cloud for maybe a minute. Sweet. Yep. Very sweet. I like this, West. This has been very informative, and I'm I'm sure that will help a lot of people because it's the type of thing that you hit and you just Alright. I guess I'm I'm done with Cloudflare proxying then. So, yeah, really great work. Beautiful. Alright. Thanks everyone for tuning in. Catch you on Wednesday. A Peace. Peace.

the at sign which is top level And then the actual SSL Most notably, I went Through recently, I'll CMS you're using, you could you could just put that in your CloudFlare, and that will happen at a CloudFlare level, and you can do redirects and whatnot. So Cloudflare is awesome. They do a lot more than that. I'm a big fan of it. And the way that Cloudflare CSSL domains.

for a full archive of all of our shows, Wes, so drop in these

Nothing given.

or too many redirects that always happens on Cloudflare. Oh, yeah.

an IP address that they give you.

that does a load balancing.

Seems like we're all good here. So, hey, Wes. I appreciate you. Yeah. Hopefully, you don't get the dreaded, like,

or drop a review if you like this show.

which is what most people do, is not able to generate because they can't see that you're pointing it at the right direction, and therefore, they can't validate it. So the solutions are I gotta say that my solution to this That says when somebody hits this URL And Cloudinary is is kind of expensive if you go over the bandwidth limit. So, people and movies and podcasts, and then you can relate those data types to each other, all without writing a single line of code.

CloudApp Then they removed my custom domain name because they say we can't. We we don't see that you're pointing it to us anymore. You're pointing it at another URL sharing tool, and I've used that for probably 12 years. And, I don't know, about a year ago, they changed it and they revoked

do the certificate for your your hosting provider. You can use Cloudflare's of, like, starters that you can you can use there with React or Vue or you name it. So thank you, Prismic, for sponsoring. All right. So let's talk about SSL certificates, Part of that is Why render? Because they have the whole tell the story.

the user and Cloudflare, For your website, cert and install it. Now not all of them will offer this. Heroku only offers it if you have a paid platform.

gray cloud it, meaning that you can just turn it off, before you switch over the domain name? Mhmm. Right? Like, if you Or like, I updated my WordPress, and it's not showing on the website. Like, why are you doing that? Like, support is very, very tricky when there is a So that country header that I really needed, You have to prove to me that you own that, and there's 2 ways to prove that you actually own a domain name. 1st, With Yeah. That's true.

Use Cloudflare as a domain name registrar. That's it. Yep. And you don't get stats or I don't think you get page rules Or you don't get most of the stuff Cloudflare. There's no special sauce. It's just a DNS.

was to to gray cloud it and not to proxy it. Yeah. And so I'm I'm interested to hear what you were able to accomplish here. Most hosting providers will tell you just create cloud it and, like which means, like, just turn it off,

Oh, interesting. Like, luckily, this is where Having a podcast is kind of nice

you want that traffic to be encrypted as well. So there's kind of 2 SSL certs that need to happen here. Right? Some people don't encrypt the traffic that's between Cloudflare and the server, Is that they proxy your website, meaning that they essentially are another server that sits between how do you solve all this? Right? You render CloudApp. Heroku does this.

They're they're amazing, right? They're great. Yeah. They're great. So,

CEO of render email me is like, hey, I see you got your issue solved, but any anything else you'd like to see? I'm like, well, don't mind if I do. Here's my. Yes.

Interesting. This whole episode to say, turn your you can write a page rule in Cloudflare with Cloudflare Pages. This is also what Vercel recommends. So Vercel will work

proving that you own the domain name to us Iosyntax.

Generation, they claim there's performance issues, which is valid. Like, Vercel is one of them. They are performance heavy, I really like to have, Like, you don't need Cloudflare until you need it. And when you need it, you need it. So it's best to get that that stuff set up for when you actually need it. And then it's It's not so stressful. Yeah. That DNS protection and even that stuff. Yep.

Approve it and then heard it back on. That's not the case for everything. With CloudApp, it didn't work. They've revoked it after I turned it back on.

and they will continue They are

turn your gray off, and Cloudflare will cache them. I wrote a little Cloudflare worker that went in front of Cloudinary, But, probably nothing will happen, but still, that's kinda you're kinda leaving yourself open there. Right? Encrypt all the things. Encrypt. Yeah. You might as well. So what's the solution to that? Because the solution is that the SSL between you and Cloudflare works, I want a certificate for scott.com. And lots of people say, okay. Sure. It's free, but like forward slash well known, continuous integration. You can run build steps but they also do it with Node. Js, which is, You get you add the domain names and they generate a SSL certificate, but it wasn't working with Cloudflare.

It's called Acme Challenge, And then between between Cloudflare If there's something you don't like about the host of service, even the CSS, I don't like. You can just intercept that request, does all of this stuff SSL not a lot of the like like, you think, like, oh, why not put it on Vercel? They don't support

what they use is the HTTP challenge. So they will put a That render didn't say I needed to do this, but I think I'm going to do it anyway, is that SSL certificate between Cloudflare and your your hosting provider that's frustrating for them. So, like, that's a valid concern. Right? Like, if, and is very, very cheap or free in my case, if you don't hit the certain limits, which is great. What else? Support is really tricky. So, like, like, you go to let's say you go to DigitalOcean or Vercel or is still good. It's just that the domain name is not pointed at probably at some point I'll get a You have to set up 2 So the solution is you can The first one, you can get what's called an origin certificate, meaning that you supply your own certificate But Cloudflare also has this thing that most DNS providers don't have, approvals, and Cloudflare and how this all works.

SSL certificate expired.

And serve up insecurely. And that's really nice. Nice thing to do with if you're moving servers and you have a high traffic website and you're going to cut over your domain name.

to the Cloudflare has a country header to Cloudflare

Approve the is that, like, you have a problem. People very quickly are sometimes They provide you caching,

It will say there's an error DNS update needed.

But in renders case, it was. They're still confusing because if you go to your render domain names, they will put that file on your server at render uses Cloudflare themselves.

And us generating SSL certificate is 2 separate things. We only have to prove you own the domain name once.

render anymore. The domain name is pointed at CloudFlare and CloudFlare is endpoint live on air right now. I'm in that orange cloud, one of my gray clouds. Live on air. Just turn it on.

then turn it off. Turn off SSL They're kind of a blurry area for a lot of devs. And, at a at an IP address For render instead of pointing it at my render domain name because A lot of people block stats. Like, most of my visitors to my website run blockers, and they don't they block Google Analytics, which is good, But I still need a little bit of stats to understand how many people are going to it. It also blocks error and exception tracking. So, they're very good at detecting who malicious actors and bots are and blocking them.

And then the other thing

not HTTPS.

And then also, once it's done that, it will generate an SSL certificate how this all works. So Let's Encrypt is a free SSL generation.

Yeah. What what exactly was not working when you say it wasn't working? Like So What what what happened?

And you'll know I'm a big fan of Cloudflare myself,

Can I So ask a question?

And neither of those were working because

don't have the purchasing power.

So let's talk about or render and be like, hey, guys, the website is broken. And it's like, no, our website is working fine.