Web Servers

Learning Objectives

Lesson

Web Servers

What is a server? The simple answer is a computer that provides services to other computers. For example, an office might have a 'file server' - a computer where office workers can read and write files that can be accessed by any other computer on the network.

A 'web server' responds to requests for a website's static content. Static content is usually read from disc; it is the same on every request and for every user e.g. HTML, CSS, JSON or image files.

A web server recieves and responds to requests via HTTP (the HyperText Transfer Protocol).

HTTP basics

HTTP is fundamental to data exchange on the Web. Whenever you issue a URL from your browser to get a web resource using HTTP, e.g. http://www.nowhere123.com/images/food.jpg, the browser turns the URL into an HTTP request message and sends it to the HTTP server.

HTTP messages are simply text documents with a uniform structure.

The HTTP request is made up of the following parts:

http request

The HTTP response is made up of the following parts:

http response

http request and response example

Try it yourself: Turn on Chrome Developer Tools and click on the Network tab. Navigate to different websites and study the HTTP requests and responses being made.

Express as a Web Server

In this lesson we are going to focus on creating a web server using the Express web framework for Node.js.

To use Express, we firstly need to install the module using npm install express. Then we create a JavaScript file (in this example we'll call it server.js) and add code to start up a web server listening on a specific port.

const express = require('express');

const app = express();
const port = 3000;

app.use(express.static('public'));

app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`)
})

In the code above we configure the server to serve static assets from the public/ folder and to run locally on port 3000.

We can now create some static content for our web server to return. index.html is the default page a web server will respond with when requests are made to the root endpoint of the server (i.e. to http://localhost:3000). We'll therefore create an index/html with the following content and save it to the public/ folder:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

To start the web server, run the command node server.js in the root directory of your project. You should see a message logged indicating your web server is running. Visit http://localhost:3000/ in your browser to see your 'Hello World' HTML page.

We can serve different kinds of files from our public folder. For example, a .css file or a JavaScript file. Let's add some style to our HTML page using a style.css file e.g.

body {
    background-color: green;
}

We'll update our index.html file to use this style sheet.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/style.css"/>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Notice the "/style.css" is not a file path, it is a URL. The browser will actually read this URL as http://localhost:3000/style.css. Try pasting that URL into your browser and you'll see the content of your CSS file.

Now, when a request is made to our web server for the index.html page, when that page loads in the browser it will make a request for another file, our style.css file. Using Developer Tools in your Chrome browser you should be able to see both HTTP calls in the Network tab. One HTTP request has generated an additional HTTP request. Notice how each request has a status code against it; these HTTP status codes indicate whether or not the call was successful.

Why might our HTTP calls return 304 status codes rather than 200?

Chrome developer tools Network tab showing HTTP calls and response status codes

Visit your favourite websites with Chrome Developer Tools enabled. Can you see how a single HTTP request spawns multiple other HTTP requests? What kind of assets are being requested?

Note that your web server is only accessible locally, to enable it to serve your HTML page to another computer you would need to explicitly configure the server to be publicly available (not recommended unless you understand how to properly secure it!).

Assignment

  1. Create a new Node.js project for this assignment

  2. Install Express using npm install express

  3. Use the instructions above to create a web server running on port 3000, serving static content from a public directory within your project

  4. Validate that you see the files being loaded in the Network section of your browser's Developer Tools. Look at the HTTP status codes, what happens to them when you refresh?

  5. Now try creating additional HTML pages and link them using anchor tags e.g.

    <a href="/about.html">About me</a>

  6. Commit your code into Github and share the link with your coach for review

Assignment extension tasks

Research what HTTP codes may be returned from a web server and in what situation each occurs. Visit your favourite websites with Chrome Developer Tools enabled and see what HTTP status codes are returned on each call. In what scenario might you expect to see a 404 returned?

Additional resources