Web development for beginners: Using web servers and npm

This blog post is part of the series “Web development for beginners” – 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.

Before we can run a web server, we have to learn a few things.

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  #

In order to use web servers, we need to know a feature of URLs that we haven’t encountered yet: _ports – decimal numbers that come after the host and are separated by a colon. These are two examples:

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

Each server has multiple ports: They are 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/

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

npm is a repository with so-called npm packages that JavaScript programmers can install and use. Each package provides:

• Zero or more JavaScript modules (files with JavaScript code – see next chapter)
  • A package with modules is also called a library because we can borrow code from it.
• Zero or more shell commands (usually written in JavaScript)

Even though the name “npm” isn’t an acronym, reading it as “Node.js Package Manager” does give you a rough idea of what npm does. It includes three components:

• The website www.npmjs.com, where we can browse available public packages.
• The npm registry which stores public packages online.
• The shell command npm for managing npm packages: installing them, deinstalling them, etc. npm comes bundled with Node.js. Since you have installed Node.js, you should already be able to use the shell command npm.

Using npm packages without installing them  #

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/. Therefore:

• 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