Learning web development: Web servers

[2025-08-26] dev, javascript, learning web dev
(Ad, please don’t block)

This blog post is part of the series “Learning web development” – which teaches people who have never programmed how to create web apps with JavaScript.

To download the projects, go to the GitHub repository learning-web-dev-code and follow the instructions there.

I’m interested in feedback! If there is something you don’t understand, please write a comment at the end of this page.

In this chapter, we run a web server on our own computer and use it to serve a web app.

What’s a web server?  

The term web server can mean two things:

  • A computer on the web that contains a web site.
  • The program that enables the computer to do that.

In this chapter, we’ll use both meanings. The context should make it clear what is meant.

How do URLs (http:... etc.) work?  

Before we can use a web server, we need to learn more about URLs so that we better understand how everything works.

With web browsers, we use addresses to tell them where to go that look like this:

https://exploringjs.com/js/

Such addresses are called URLs – Universal Resource Locators. We may think of them as addresses for web sites but they are addresses for resources (most commonly files): If we go to a website, the browser downloads an HTML file and displays it. When we opened an HTML file from our local drive, we already saw clearly how that works.

Simple URLs have the following parts:

  • Protocol: https:
  • Host: exploringjs.com
  • Pathname: /js/

What roles do these parts play?

  • The host tells the browser which server on the internet to go to. “Server” is just another word for “computer that we can reach via the internet”.
  • The protocol tells the browser how to talk to to that server. The protocols used by the World-Wide Web are HTTP (Hypertext Transfer Protocol) and HTTPS (Hypertext Transfer Protocol Secure).
  • The pathname tells the browser where the file is located that it should display.

With URLs, there is one convention that is often used for directories: If a pathname points to a directory, it is an abbreviation for “the file index.html in that directory. In other words, the following two URLs refer to the same file:

https://exploringjs.com/js/
https://exploringjs.com/js/index.html

file: URLs  

If we open a file from our drive in a web browser then it uses a file: URL - e.g.:

  • This file: /home/robin/site/index.html
  • Has this URL: file:///home/robin/site/index.html

Note that file: urls have no hosts (which would be mentioned after the first two slashes and before the third slash) - which makes sense because we don’t have to go to a server on the internet to retrieve the file.

  • Files on the internet are called remote files (protocol http:, https:, etc.).
  • Files on our drive are called local files (protocol file:).

Excursion: hexadecimal numbers  

You will not need this knowledge very often but it is helpful to have a rough idea of what hexadecimal numbers are because they occasionally come up in web development.

  • Decimal numbers are based on the number ten: “10” means ten, “100“ means one hundred (ten times ten), etc. They have the following digits (a number consists of 1+ digits):
    0123456789
  • Hexadecimal numbers are based on the number sixteen: “10” means sixteen, “100” means 256 (sixteen times sixteen), etc. They have the following digits:
    0123456789ABCDEF

We can even convert numbers from hexadecimal to decimal via JavaScript: If a number literal starts with Ox (x stands for heXadecimal) then it is interpreted as a hexadecimal number:

> 0x9
9
> 0xA
10
> 0xF
15
> 0x10
16
> 0xFF
255
> 0x100
256

Why are hexadecimal numbers convenient in computing? Because the numerical range of four bits is 16: 2 × 2 × 2 × 2. One bit has a range of two – it can represent two numbers.

Referring to servers: IP addresses and domain names  

A protocol is like a language that computers use when they talk to each other. The protocol of the internet is called IP (Internet Protocol). The internet is the foundation of the web. And IP is the foundation of the web protocols HTTP and HTTPs. As a rough analogy: If HTTP is how browsers and servers talk to each other then IP is the infrastructure (phone lines, phone numbers, etc.) that makes that possible.

Roughly: Each computer that is online on the internet has an IP address (its phone number, if you will). There are two IP versions: IPv4 (IP version 4) and IPv6 (IP version 6). The addresses of the two versions look different. These are examples:

  • IPv4: 192.0.2.1 (decimal numbers)
  • IPv6: 2001:0DB8:AC10:FE01:0000:0000:0000:0000 (hexadecimal numbers)

If servers have addresses with numbers then why can we use names such as exploringjs.com to refer to them? Such names are called domain names and there are domain name servers on the internet that convert domain names to IP addresses for us.

Localhost  

Localhost is another name for “the computer I’m currently using”:

  • Its domain name is localhost
  • Its IP address is:
    • IPv4: 127.0.0.1
    • IPv6: 0000:0000:0000:0000:0000:0000:0000:0001
      • Abbreviation: ::1

Localhost helps us when, during development, we run a web server on our own computer to experiment. Then we can use real HTTP URLs (which is more similar to real websites) without actually leaving our computer and connecting to the web. We work locally but we can simulate working remotely.

Ports in URLs  

There is one last thing we need to learn: URLs can also contain _ports – decimal numbers that come after the host and are separated by a colon:

  • http://localhost:80/site/
  • https://exploringjs.com:443/js/

Each server has multiple ports – channels over which we can communicate with it. We normally don’t see ports because there are defaults that are used:

  • The default port for HTTP is 80
  • The default port for HTTPs is 443

Therefore, if you enter the following URL in a web browser, it will even remove the port because it is unnecessary:

https://exploringjs.com:443/js/

Now we are finally ready to run our own web server!

npm (the Node.js package manager) and the npx command  

Node.js includes a way of installing software packages: npm – the Node.js package manager. On its website www.npmjs.com, we can browse the available packages. Most of them are libraries (functionality that we can use in our JavaScript code) and/or shell commands.

Normally, a package has to be installed before we can use it, but there is also a way to run a shell command in an npm package without installing that package: the shell command npx. For example, the following shell command prints a cow drawn with characters to the terminal. That cow has a speech bubble which contains the text we provide as an argument to the shell command:

npx cowsay "Hello!"

We ran the shell command inside the npm package cowsay without installing it. (Technically, it is installed temporarily in a hidden space on our drive and automatically updated or removed as needed.)

Running a web server  

The npm package http-server contains a shell command that runs a web server. Thanks to npx, we can run it without installing it:

npx http-server <dir-path>
npx http-server

This shell command starts a web server that serves all the files in the directory <dir-path>. If we omit that argument, the current directory is used.

Running fruits-you-like-generated.html via http-server  

Let’s try out the web server:

cd learning-web-dev-code/projects/
npx http-server

Now the web server runs in the shell and blocks it: We can’t currently use it. We can stop the server by pressing Control-C, after which we can use the shell again.

The output of http-server includes the following text:

Available on:
  http://127.0.0.1:8080

Therefore, we can use this URL to run a web app:

http://127.0.0.1:8080/fruits-you-like-generated.html

The root directory of http-server  

In file systems, the topmost directory that contains all the files of a drive is called the root directory. Its path is / on Unix and (e.g.) C:\ on Windows.

Due to where we started http-server, its root directory is learning-web-dev-code/projects/. That’s why:

  • This path on our drive: learning-web-dev-code/projects/fruits-you-like-generated.html
  • Becomes this path online (in the URL): /fruits-you-like-generated.html

Using port 80  

By default, the web server uses the port 8080 because it doesn’t conflict with other commonly used ports. However, we can also tell it to use port 80:

npx http-server --port 80

Then the URL becomes simpler (because 80 is the default for HTTP):

http://127.0.0.1/fruits-you-like-generated.html

Options for shell commands  

In the world of shells, --port 80 is called an option. It is an argument for the shell command http-server that has a descriptive label. Some options – so-called boolean options consist of only the label. Then the presence of the label means that the feature is active and its absence means that the feature is inactive. This is an example:

npx http-server --silent

--silent prevents “log messages” with status information from being printed to the terminal.

Many shell commands support the option --help and its single-character version -h and display information for using them. As examples, try out the following commands:

node -h
npx http-server -h