Express.js is a Javascript library that handles web routing and HTTP requests for web applications.
Express builds on the native HTTP library in Node.js to allow for a simple, object-oriented approach to route your web application.
The creators of Express.js describe it as a 'minimalist framework', meaning that Express.js handles a few core tasks well, but does not include many nice-to-have features. Instead, you can enhance your Express.js application with middleware downloaded from npm or that you build yourself.
This series has four parts.
First, we'll look at HTTP routing, the problem that Express.js tries to solve.
Second, we'll look at a bare-bones setup and configuration of Express.js.
Third, we'll look at practical routing in Express.js.
Fourth, we'll enter the wonderful world of middleware to see how Express.js makes it easy to add useful features to your app.
Let's go!
Networking occurs when servers and clients talk to each other.
In computing, a client refers to a computer that makes requests. A server refers to a computer that replies with a response. The internet, through TCP/IP, is the communication channel that servers and clients use to talk to each other.
Programmers often refer to servers as the back-end and clients as the front-end of a user's online experience. These are just servers and clients!
HTTP is a set of guidelines and standards for how this networking can occur. We don't need to know the details. Just remember that below Express' simple API, our applications are using HTTP to wire everything together.
After a server is launched it sits there, listening for requests.
If a client sends a request, we set off a loop that's at the core of online networking:
- A client initiates a request
- The server listens and receives the request
- The server processes the request, perhaps validating data or interfacing with a database to craft a response
- The server sends a single response back to the client
This back-and-forth between client and server forms the request/response cycle. Every HTTP request follows this cycle.
Client ---- 'the internet' : TCP/IP ----- server
makes connects through sends
request ===> routing... ====> response
response <=====================================|
Note that for any requests there is one and only one response. When you visit a modern web page, you'll likely make many requests at once even though the page seems to load only one time.
One response may return the HTML of the page, another might deliver an image or a video, and another might deliver a CSS file necessary for styling the web page.
After the request/response cycle is complete, the client's computer and browser handle the rendering and visualization of the response. For example, the client's browser may display images that were sent by the server.
In short, when you type a URI (e.g. www.google.com) into your web browser and press enter, you are making an HTTP request to a server. The website, files, message, or whatever else you receive is that server's response.
Requests and responses have a predictable format since HTTP is a set protocol. As we'll soon see, Express.js maps onto this format to make it easy to handle a response or request.
An HTTP request contains...
- Route – What's our URI? (e.g. http://www.google.com)
- Verb – Is this a GET/POST/DELETE or other request? Sometimes called 'method'. More on this later.
- Headers – Meta-data about the request.
- Payload – The actual data sent by the request, like a name submitted into an HTML form.
An HTTP response contains...
- Status – The HTTP 'status code' and standard message of the response i.e.
200 / OK!People are most familiar with the404code, which is likely what you'll get if you try to access an invalid URL! - Headers – Meta-data about the response.
- Body – The data sent back to the client, such as the HTML of a webpage or a file.
If you're a little confused by all this, you're not alone.
Handling responses and requests on your website or application is no small feat. Every page and file on your website must be routed to the user at the appropriate time.
To receive data from the user, your server will need to read the request's payload. You'll also need to make sure the proper verb is tied to the right route, so that a GET (when the client receives data) does not act like a POST (when the client sends data). You'll need to send back correct status codes and, of course, make sure any files or other data arrive at the proper time.
Each subpage may also have its own route. For example, www.yoursite.com might offer one response and www.yoursite.com/pictures might offer another.
Imagine how many routes you would need on a complex website if you had to route the whole site, file by file, page by page!
The beauty of Express.js is that it massively simplifies all this routing, leaving you to focus on the overall architecture of your app or website.
In the next part of this series, we'll install and configure Express.js for our app.