What is localhost and why is it used during web development?

One of the most important concepts in web development is that of localhost. Get to learn what exactly is it.

Back when networking applications were being built at the dawn of the Internet, developers had to inevitably test those applications locally first before publishing them. This meant that some IP addresses were needed to route back to the same computer from where they were entered. Later, with the advent of the World Wide Web, this idea took off and grew extremely useful.

Eventually, the idea of "localhost" got introduced as a convenient name for denoting one of these special IP addresses. Let's explore the most important aspects of localhost in this article.

What is a loopback address?

Before you can understand the idea of localhost, it's important to have a solid understanding of the idea of a loopback address. Essentially, a loopback address is an IP address that points back to the underlying machine. The most typical example is 127.0.0.1, in IPv4, and ::1 in IPv6.

For example, let's suppose you're on computer A and you enter the following IP address in the browser:

127.0.0.1

The operating system already knows how to deal with this special address — which is a loopback address. Instead of asking the underlying network machinery to dispatch a global request to connect to this IP address, the operating system internally routes the request to the computer itself.

There probably already is a server running on the same computer and the request lands on that server. In essence, you don't need an Internet connection to work with a loopback address.

What is localhost?

Localhost is a convenient name used to denote the loopback address 127.0.0.1.

The term "localhost" is actually self-explanatory: "local" means that it's related to the underlying computer itself, whereas "host" implies that you're dealing with a computer.

Remember that a host stands for a computer/device in a network.

Just like a loopback address, the operating system knows how to resolve the host name localhost. Basically, it gets converted into the IP address 127.0.0.1 which in turn gets routed back to the same computer.

So, once again, in order to access localhost, you do NOT need an Internet connection at all! The operating system doesn't leverage its external network machinery to resolve a request to localhost.

What is localhost:3000?

You might've heard of localhost:3000 as well, in addition to localhost itself, and probably wondered what's the difference? Well, there isn't much difference.

In localhost:3000, localhost as before, represents the host; 3000, on the other hand, represents the port number on this host on which a server is running.

There's nothing special about 3000; it's just a conventional port number used by applications. Some other common ports you'll find in use are 8000 and 8080.

In localhost, there is no port number explicitly mentioned and so the operating system assumes the default port 80 for HTTP and 443 for HTTPS (as per HTTP's specification). Hence, localhost and localhost:80 are basically the same.

Similarly, https://localhost and https://localhost:443 are the same thing.

How to set up localhost?

Setting up localhost isn't any rocket science. You just need to set up a server on your computer, listening on a given port. That's it. (Really!)

Typically, this server is an HTTP server. To set up an HTTP server, you can use Node.js and set up an HTTP server in less than a minute or two.

Consider the following code that sets up an HTTP server in Node.js using the core http module. The created server listens on port 80, which is the default in case you just access localhost in the browser (without explicitly mentioning the port):

server.js

JavaScript

import { createServer } from 'node:http';

let server = createServer((req, res) => {
   res.setHeader('Content-Type', 'text/html');
   res.end('Hello world from Node.js');
});

server.listen(80, () => {
   console.log('Server running at port 80.');
});

Run this program as follows

 node server.js
Server running at port 80.

and then head over to the browser and enter "localhost" (or you can be more explicit and enter the full URL "http://localhost"). This should lead to the following webpage:

"Hello world from Node.js" text rendered in the browser.

Of course, you aren't obliged to use Node.js for setting up localhost. You can use any other web server technology — the likes of Apache or nginx — for this.

Anyways, to reiterate it: "setting up localhost" means to set up a server — most likely an HTTP server — on your computer. Once you do this, your localhost is all up and running.

Others can't access your localhost

One final thing I want to discuss with you is that your localhost is NOT accessible by others. So what does this mean?

This means that you might be perfectly able to view a website when you enter a URL like http://localhost but if you, let's say, share this URL with your close friend and ask him to view your website and tell you how it looks (even though you already know it looks cool), your friend won't be able to view it.

This is because the moment your friend loads http://localhost in his browser, his computer loops back that address to his computer. And because there probably isn't a server running on your friend's computer, he gets an error page shown in the browser.

So what's the solution if you really wish you show your website to your friend? Well there are two solutions: