Join Daniel Khan for an in-depth discussion in this video The anatomy of an HTTP request, part of Building a Website with Node.js and Express.js.
- [Instructor] Differently than with other web languages, like for instance PHP that runs as a module in Apache, Node.js comes with a web server built in. So Express is actually a hypertext transfer protocol, in short HTTP server. As such I think it doesn't harm if we quickly cover how HTTP actually works. HTTP is a quite simple text-based protocol. I use Telnet to show what's going on behind the scenes when you request a file in the browser. Don't be intimidated by what you see on the screen right now.
I'll break it down for you. First I connect to the server, in this case Google.com on port 80. That's the standard HTTP port. If the request should be encrypted, you would use port 443, which you know as HTTPS in your browser. Your browser knows this and selects the right port depending on if you use HTTP or HTTPS. My local system will now make a call to the domain name service, which resolves the domain name to an IP address. Once it knows it, it will try to connect to this IP address on port 80, and the system will hopefully reply that we are now connected.
Now the actual HTTP protocol starts. I type GET /, which means give me the index page of this web server. The web server will first tell me if the request went through successfully. It communicates this by HTTP status code, in this case 200, which means okay. Then the server replies with a bunch of headers that instruct the browser to do specific things, like setting a cookie and the html, which is quite a lot when it comes to Google.
The command GET as we used it here is a so called HTTP verb. It is usually used to retrieve data. The other word that is used often in browsers is POST. It is used to send the data with a request like when you submit a form. And there are a few other verbs that are not used when you browse the web, but are relevant when you work with so called REST APIs. These are application programming interfaces that use regular HTTP and its verbs to programmatically communicate between systems.
In this course, as we are creating a regular website, GET and POST are important because we will later create routes for it. What are routes? You see that we have a path here on every HTTP verb. A path is a part of the unique resource locator or URL. That is everything in the browser address bar including: protocol, domain name, path, and query string. In my Google example this was the route path, which is identified by a slash.
But of course if you look into the address bar of your browser path can be much longer. They are similar to how a folder structure works actually to identify a document on the web. On today's web applications that serve dynamic data, those URLs usually don't point to a specific document, but to a handler that knows what to return for a given path. These handlers are often referred to as routes. In my example from before we also saw a status code, in this case it was 200. Status codes are used to tell the browser the outcome of a request, and there are plenty of it.
We will only cover the most important here. Everything from status code 200 to 299 indicates a successful request. 200 is used most commonly, and it simply means OK. Code 300 to 399 tell the browser to redirect to another page. For instance 301 means Moved Permanently, and you often use it to tell the crawl of a search engine to replace an indexed page by a new one.
Anything from 400 to 499 indicates a problem on the client. Like some kind of bad request indicated with 400. Insufficient privileges like with 403: Forbidden or a nonexisting URL indicated by 404: File Not Found. And then there are the errors from 500 to 599. They indicate a server problem. Most commonly you will see 500, which means Internal Server Error.
Equipped with this knowledge we are now ready to dive right into Express.
- Creating a server with Express and pure Node.js
- Handling errors in Express
- Creating routes
- Using templates
- Working with the Pug template engine
- Implementing the site structure and logic
- Working with conditionals
- Dealing with POST requests
- Sanitizing user inputs and handling form errors