Map friendly application names to localhost and port numbers

So, we'll all familiar with running various local web servers/services on our own computer and running them on the 127.0.0.1 ip address and various port numbers (because we cannot share an ipaddress and port number combination). So, it is the case that for local web servers one types into a browser address bar addresses like localhost:3002 or 127.0.0.1:4005. It would be better if we could give our local web servers/services friendly names and also drop the port number. That is the goal of this post.

Let us try to give two friendly names to two web services, we'll call them Luke and Leia.

When one types an ipaddress or a network name into a web browser address bar the port numner is assumed to be port 80 (for HTTP) unless specified othwerwise. So if I type in Luke into a web browser address bar then that actually signifies Luke:80.

It turns out that the necessary configuration to do map friendly names occurs in two places, the name to ipaddress occurs in the HOSTS file but the port routing is handled by an application called netsh.

Use the HOSTS file to map hostname to Ip Address

We'll do the hosts part first which is to amend the HOSTS file which (on my machine at least) can be found at C:\Windows\System32\drivers\etc\hosts. Note the hosts file has no file extension and so looks like another folder in the address but it really is a file. Take a backup of this file because if you mess up then your system will malfunction, ***this is your responsibility not mine***. You will need Administrator rights to amend the contents of this file and the whole directory.

If you are satisfied in taking responsibility then amend your hosts file to include the following lines...

# to allow friendly names for localhost web servers/services
127.0.0.2     luke
127.0.0.3     leia

You can test if this change has been applied by pinging Luke then pinging Leia so I get the output below and you can see the respective ip addresses in the output...

C:\>ping luke

Pinging luke [127.0.0.2] with 32 bytes of data:
Reply from 127.0.0.2: bytes=32 time<1ms TTL=128
...

C:\>ping leia

Pinging leia [127.0.0.3] with 32 bytes of data:
Reply from 127.0.0.3: bytes=32 time<1ms TTL=128
...

I still have the web servers running from the previous blog article (please read at least bottom part) and so I can now type into a browser and get the following...

http://luke:3002/
Bonjour le monde de port 3002 (2021-08-27 15:07:54)

http://leia:3003/
Hello world from port 3003 (2021-08-27 15:07:45)

It ought to be noted that ip address 127.0.0.1 is not the only loopback/localhost address, every ip address that begins with octet 127, i.e. 127.*.*.*, is a loopback/localhost address. So our ip addresses for Luke and Leia of 127.0.0.2 and 127.0.0.3 are both localhost addresses and so no network packets leave the machine they are always handled locally. It should be noted that 127.*.*.* means there are 256^3 loopback/localhost addresses, or above 16 million. So that should be enough! Especially when you consider we have yet to factor in all the combinations with port numbers!

So I am happy to have abolished the ip addresses and given the friendlier names of luke:3002 and leia:3003 but the port numbners need to go away so we will do that next.

Port Proxying

I am indebted to this stack overflow answer Using port number in Windows host file - Stack Overflow which highlighted the use of the tool netsh (and the hosts file above). In my example I going to use the following command to port forward for Luke and Leia...

netsh interface portproxy add v4tov4 listenport=80 listenaddress=127.0.0.2 connectport=3002 connectaddress=127.0.0.2
netsh interface portproxy add v4tov4 listenport=80 listenaddress=127.0.0.3 connectport=3003 connectaddress=127.0.0.3

You can use the command netsh interface portproxy show v4tov4 to display what you have just registered...

PS C:\Windows\System32> netsh interface portproxy show v4tov4

Listen on ipv4:             Connect to ipv4:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
127.0.0.2       80          127.0.0.2       3002
127.0.0.3       80          127.0.0.3       3003

And now in the web browser I can abolish the port number...

http://luke/
Bonjour le monde de port 3002 (2021-08-27 15:07:54)

http://leia/
Hello world from port 3003 (2021-08-27 15:07:45)

You remove an entry with a command line like...

netsh interface portproxy delete v4tov4 listenport=80 listenaddress=127.0.0.2

Warning, I have come across some posts that say the Apache web server can hog all the localhost/loopback addresses and so if this is not working for you then you might want to stop Apache, the same applies to IIS Express.

One interesting point to note is that is appears that the entries are stored in the registry at Computer\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\PortProxy\v4tov4\tcp here is a screenshot...

Installing PowerShell 7

I installed PowerShell 7 because I wanted to use the Background operator & when running node web servers. The background operator & will run the command line in the backgroud and so not tie up a command window; it is a feature borrowed from the UNIX shell. It means I can run several web servers or other long running (or permananent) executables from a single command window.

The other feature I want is the option to open a PowerShell command window from the context menu when in a Windows Explorer window. This already is working for my current version of PowerShell (5.1). I'd want it for PowerShell 7 as well.

It seems if you want the latest version of PowerShell, version 7, then you must deliberately install it. That is to say the Windows service packs and Windows updates did not upgrade my PowerShell from version 5.1 automatically. Here is the Microsoft web page for downloading and installing PowerShell 7.1.

The installer throws a series of dialog boxes which I have shown below, I took the defaults with the exception of the feature labelled Add 'Open here' context menus to Explorer. If I didn't take this option then I'd have to fiddle around in the Registry to get that feature working. Much better to turn on this feature at the install stage. The final screenshot shows the context menu feature working.

Multiple Background Jobs with Powershell

So now I am ready to run some instances of a node.js web server on different ports. Firstly, let me give some node.js source code. The following listing will return either Hello world or Bonjour le monde depending on the command line arguments on an ip address and port number also specified on the command line.

var args = process.argv.slice(2);

const http = require('http');

const hostname = args[0] || '127.0.0.1';
const port = args[1] || 3001;
const lang = args[2] || 'en';

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  var timeStamp = new Date().toISOString().replace(/T/, ' ').replace(/..+/, '');
  var greet = (lang ==='fr') ? 'Bonjour le monde de port': 'Hello world from port' ;
  res.end(`${greet} ${port} (${timeStamp})`);
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/ language:${lang}`);
});

So to run the above I'd run the following example commands ...

node.exe .\server.js 127.0.0.2 3002 fr
node.exe .\server.js 127.0.0.3 3003 en

Below is a screenshot of PowerShell 7 where I run these commands with the ampersand & operator which forces them into the background. You can see that Powershell reports then as a background running job. These jobs can then be terminated using the stop-job command supplying the job number.

CSS Grid's 'grid-template-areas' are wonderfully intuitive

Finally, I have found a decent CSS grid layout technology. Twenty years ago, I used to use HTML tables to structure a page. Then we were told not to use tables and switch over to CSS instead but the CSS techniques at the time were inadequate and so I and many other programmers carried on with HTML tables. Now, I am happy to blog about CSS Grid's grid-template-areas which are wonderfully intuitive way to layout a page.

A really good YouTube video is Easily Structure your Layout with CSS Grid's 'grid-template-areas' and I have given the source code for this video below. I have also embedded the sample page into this blog entry, converting as required. You should find that this is a responsive page that will reduce to a column/stack if the browser's width is made narrow. The CSS has a 'mobile first' design in that the default declaration is for the reduced screen mobile stack whilst the media queries further down are where to find the full window declarations.

You really should watch the video in full but for those in a hurry the real essence is in the following extracts, first we have this grid-template-areas CSS property...

grid-template-areas:
    "sidebar header header header"
    "sidebar sect1  sect2  sect3"
    "sidebar main   main   main"
    "sidebar footer footer footer";

Then we have the HTML...

<body>
    <aside></aside>
    <header></header>
    <section></section>
    <section></section>
    <section></section>
    <main></main>
    <footer></footer>
</body>

Then these are tied together by specifying the grid-area property in each HTML element's CSS ...

aside { grid-area: sidebar; }
header { grid-area: header; }
section:nth-of-type(1) { grid-area: sect1; }
section:nth-of-type(2) { grid-area: sect2; }
section:nth-of-type(3) { grid-area: sect3; }
main { grid-area: main; }
footer { grid-area: footer; }

And that's it, full listing below. Speaking personally this will be my go to page when drawing up a web page from scratch. Enjoy!

Sample Page

Code Listings

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <aside></aside>
    <header></header>
    <section></section>
    <section></section>
    <section></section>
    <main></main>
    <footer></footer>
</body>
</html></html>

main.css

body,
html {
    height: 100vh;
}

body {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
        "sect1"
        "sect2"
        "sect3"
        "main"
        "footer";
}

aside {
    grid-area: sidebar;
    background-color: #007fff;
}

header {
    grid-area: header;
    background-color: #71b8eb;
}

section:nth-of-type(1) {
    grid-area: sect1;
    background-color: #B3D8FD;
}

section:nth-of-type(2) {
    grid-area: sect2;
    background-color: #5E86AF;
}

section:nth-of-type(3) {
    grid-area: sect3;
    background-color: #6D9FD2;
}

main {
    grid-area: main;
    background-color: #7DA9D5;
}

footer {
    grid-area: footer;
    background-color: #588EC3;
}

@media only screen and (min-width: 768px) {
    body {
        margin: 0;
        display: grid;
        grid-template-columns: auto 27% 27% 27%;
        grid-template-rows: 8% 30% auto 10%;
        grid-template-areas:
            "sidebar header header header"
            "sidebar sect1  sect2  sect3"
            "sidebar main   main   main"
            "sidebar footer footer footer";
    }
}

Links

• "Our experiments with trying to design a page that used floats and worked across different browsers on different platforms failed" W3C, Ian Jacobs, Re: site comments

How do web servers tell the (Windows) operating system which port to listen on?

So I chanced upon a beautiful piece of sample C++ whilst wondering around the Microsoft website. Essentially the code creates an http server sample application. If we browse the code we can see that there is a line to register interest in a URL of which the port is a segment by calling HttpAddUrl.

Before we call HttpAddUrl we have to call first HttpInitialize and then httpcreatehttphandle; the latter passes a structure that we can pass into HttpAddUrl.

But now we can get to the heart of the issue: how to register interest in a port. Here is the method signature of HttpAddUrl.

HTTPAPI_LINKAGE ULONG HttpAddUrl(
  HANDLE RequestQueueHandle,
  PCWSTR FullyQualifiedUrl,
  PVOID  Reserved
);

The second parameter is a string, a URLPrefix string to be precise. The syntax and examples are given below.

"scheme://host:port/relativeURI"

https://www.adatum.com:80/vroot/
https://adatum.com:443/secure/database/
https://+:80/vroot/

To start receiving requests the sample code gives a function which handles each request, in this code there is yet another Windows API call this time to HttpReceiveHttpRequest.

And that is enough code, although we should tidy up and this is given in the code. Hopefully this clarifies the relationship between a web server and the (Windows) operating system.

There are some details about upgrading the code when using HTTP Server API Version 2.0. Other than that the code stands

All of this is for Microsoft Windows obviously, but I should imagine the process is similar for Linux and Mac OS.

Previously I have given code (twice!) that allows Excel to run as a web server: once in C# and once in Python. So, it would appear that for the adventurous some C++ Excel addin could also implement an HTTP web server! So that's a third way!