Video Tutorial: What happens when you visit a url?

Transcript

[00:00:00] Raphaël: Hey folks, welcome to this first video tutorial for chewy. Basically what we’re going to cover in this video is like the basics of the internet. Like how, what happens when you type a URL into your browser? What happens on the other end? A little bit of the in-between, but not too much.

[00:00:23] Really just the very basic. I’m here. I’m gonna, I’m gonna basically set everything up from scratch. So I got this domain called chewy demos.com and I set up this digital ocean account here where we can spin up a server and what we’re going to do, whoops, is figure out. Okay. So when I go somewhere on the internet, I go to, chewydemos.com?

[00:00:48] Right now, there’s nothing here. What sort of happens next? What do we want to happen? How do these systems all work together? So first you need a domain. A thing that you want to go to, so I got chewydemos.com and we are going to go to chewydemos.com and I’m going to open up.

[00:01:11] The Chrome dev tools here. So if if you work as a developer and specifically doing web development, you tend to spend a lot of time in here. And this shows you a lot of, just how a web page works and how the network works. I’m not going to go in depth on how the networking stuff works in part, because I’m not an expert in that. But I can cover the basics. 

[00:01:33] I hit enter. I go to chewydemos.com and what happens here Chrome will send out a request to chewydemos.com and in this case, the domain is not configured. So it just says I can’t figure out what this is supposed to be, error name not resolved. So essentially what happens is you need this name to resolve to an address on the internet. An IP address. And that’s how things know how to talk to each other. So your computer will send out this request. There’s a whole bunch of complicated stuff that, that determines how it’s going to go figure out what the correct IP address is but in its simplest form, we need that IP address to be listed here.

[00:02:20] Okay. So what do we need next? We need something to be attached to that IP address. We need a server. Now the word server can mean a couple of different things. It can be either software or hardware basically something software or hardware that that responds to a request of some sort.

[00:02:38] So when we talk about the internet and a lot of other things, we talk about the client server model. So the client, in our case, in this demo is the browser and the server is going to be two things. For this demo, we’ll call it a hardware server. So we need like an actual machine in digital oceans data centers.

[00:03:01] And we also need some software and the software. Server running on the hardware server is going to wait for a request from the browser. And when it gets that request, it’s going to respond back with some information. So let’s do this. We’re going to create a droplet is just DigitalOcean’s term for a virtual machine. The reason I’m using digital ocean, we use it a lot for for our projects at Éphémère Creative, which is the company behind chewy. Because for a lot of our clients it’s quite nice, cause they’re stable pricing and pretty, pretty low pricing. By comparison with the big cloud providers, like AWS GCP, and Azure.

[00:03:45] It’s also a lot simpler to deal with. So we are going to create a or spin up a really nice cheap machine. We’re going to use Ubuntu, which is a version of Linux that is nice and easy to use. There’s a lot of documentation out there which makes it practical. You also have to choose which data center.

[00:04:05] So one of our considerations pretty often. Yeah. Is our data staying in Canada for our clients who have data privacy and protection requirements that, that tell them they have to keep their data in Canada. If you’re thinking about GDPR and some other privacy frameworks around the world, you might want to switch to Frankfurt or San Francisco, depending on your needs.

[00:04:32] So I’ve already gotten an SSH key here. We won’t actually, I won’t get into what that is, but essentially it’s a key to access your server a little bit like a key to access to your house or apartment or whatever. And you could also use a password, but this is a little simpler for me, cause I already have mine configured.

[00:04:53] Going to call this chewy demo dust. That’s just a way for me to know which machine this is, and if you’re actually building something where you’re going to be storing data and stuff, probably a good idea to have backups. In our case we’re just going to go ahead and do that. Okay. So this usually takes just a couple of days.

[00:05:20] But yeah, in the meantime, maybe we can hop over here. Oh, Nope. Can’t do anything here. Actually I will talk a little bit about CloudFlare. CloudFlare is a service where you can purchase domains and you can manage them and you can do all kinds of fun stuff to speed your website up and to protect it and whole bunch of other stuff.

[00:05:45] It’s pretty cool, and they keep adding you new things as well. So we can see that this is now ready and we were talking about IP addresses. So by default, when service a cloud provider like digital ocean spins up a new machine. It’s going to be assigned an IP address. So I’m going to copy that.

[00:06:07] And I’m going to create, what’s called an a record, which is a way to point this domain to that machine to that specific IP address. You’ll see, there are a bunch of other types of records. We won’t go into those right. The types you deal with most often at early stages of web development are going to be A records and CNAMEs.

[00:06:28] We won’t dive into this proxied stuff too much, but when you’re using CloudFlare, essentially, that’s a way to enable all of the sort of fun features that they provide for speeding things up and security and, cool. Okay. So now can we go to two demos.com? We can’t.

[00:06:47] With CloudFlare it’s pretty fast, but essentially you kinda need to tell the whole internet, like everyone out there around the world that going to this domain should go to this IP. And that takes a little while to spread out around, around the internet. So usually you have to wait a bit with CloudFlare.

[00:07:07] It tends to be pretty fast, but we still have a problem. So I’ll do this and we still get nothing. And the issue is that we don’t have any software waiting for that request. I’m going to click on this. And for the sake of this demo, all we’re going to do is check out access and we’ll do that launch droplet console.

[00:07:37] And this gives us a command line if you’re not used to command lines and you’re wanting to get more into a web development, you might want to practice a little bit If you’re on a Mac, you can open up your terminal. And that’s how, you’ll how you’ll get into that. On windows, you can use PowerShell that you might want to install something like git bash.

[00:07:57] So you get more familiar with the sort of Linux style stuff. Cause you will be doing a lot more Linux related stuff if you’re delving into web development. So this is our server. If we do LS, that should list the stuff in this directory. So we’ve got this thing called snap. Don’t need to worry about that.

[00:08:19] I’m going to make a directory called demo. That’s what the mkdir command does and we’ll CD into demo. Here we’ll do touch server dot JS. You’ll see if I do LS, we can see that created server dot JS that’s file. And we will use this little command called VIM, which is a text editor and we will open server dot JS.

[00:08:45] So you’ll find also that as you get into web development, basically we’re just all we do is Google stuff. That’s the. The work is figuring out what other people have done before learning from it, adapting it to your needs. So yeah, I tend not to remember a whole lot of specific stuff.

[00:09:11] You just get really good at remembering where that stuff is on the internet. So you can find it next time you do develop muscle memory for when you’re actually writing code, but. In this case, I’m going to head back over here and I will paste that and let’s go back up here. I should know the shortcuts for them.

[00:09:39] I do not. I’m going to set this to the 0.0.0.0 for reasons. And we’ll set it to port 80. Also for reasons. And I will do that, which will write this stuff to the file that we created. Okay. So I will go a little bit into those reasons. Making the host names 0.0.0.0 will make that sort of available to the public and the port…When you go to a website by default, your browser is making a request to the IP address or to the server that the domain resolves to it, it defaults to port 80 when you’re doing a secure request, HTTPS it resolves, or it goes to port 443. We just want insecure requests for now.

[00:10:30] So we’ll start that on port 80 now. Okay. How do I get this code up and running? This is Java script and the way to run JavaScript on a server is using what’s called node. I am not going to get into. How these different things interrelate, but too deeply. But basically node is a think of it as a program that interprets the JavaScript file.

[00:10:59] It grabs that text. It knows what to do with it and turn it into like a running program. So if I type node we’ll get nothing but a Ubuntu conveniently provides us with the command to install it. So I’ll do that. Yes. And now I’ll run node server dot JS.

[00:11:30] Okay. So we’ll head over to chewydemos.com. Actually I’ll just restart. I did something. So I’ll restart my server here. And if we go to chewydemos.com, we’ll see, hello world. And so we can see that’s just code in this server file. So we have hello world right here. I can change it to hello Shui.

[00:12:02] And now if I start that server again, we’ll see. Hello chewy. And just to cap off this video, the stuff that you send back from. The server. From The code running over here that can be basically any sort of file or information. And here you’ll see, it says content type text/plain. I’m going to switch that over to HTML.

[00:12:43] You could send back an image if you wanted to. You’d have to load that from somewhere. But even with text, there’s different sort of types of text. And so this is this sort of next layer of the web, which is the things that run on the front end. So I’m going to do this

[00:13:10] and write that and quit. If I do node server again

[00:13:20] here, we’ve got a header. So you can see our code had that H one

[00:13:30] that’s HTML telling the browser to render a header, like a level one header there’s six levels. Yeah, that’s how the web works. So you send back information from the server. The browser will interpret it.

[00:13:47] If it’s HTML or these other things, HTML, CSS and JavaScript are the three sort of main things that the browser knows how to interact with. And you could also send back a file and tell the browser to download that. You can send back different types of text that the browser can load into JavaScript.

[00:14:08] Yeah, you can do all kinds of stuff, but that’s the basics. So you have a domain, your browser sends a request through that domain, to your server. Physical server, that physical server is running a software server. That software server receives that request, interprets it and spits something back out. And that thing gets.

[00:14:34] Rendered back to the screen by the browser or depending on what else it might be. And yeah, that’s the basic flow of the web and how this all works. So thanks for watching. Hopefully this was a useful introduction to how the web works and 

[00:14:55] if you liked this video, make sure to subscribe. We’ll have other stuff soon. Hopefully you can join the community at https://we.gochewy.io. And yeah. See you next time.

Related Articles

Responses

Your email address will not be published.