How to configure a fake domain name on your localhost on linux aka virtualhosts

Often when testing a web project locally you will use something like http://localhost:9000. Unless you are using Docker and dockerizing your app. What if you want to run multiple apps or multiple versions of one app at the same time and instead of going to localhost:9000, localhost:9001 etc. etc. you want to go to https://yourappname and https://yourapp-name2 …

Well on linux you edit the Hosts file and create a loopback to localhost 127.0.0.1 or whatever IP you want. I mostly leave it with the localhost loopback though to prevent myself from blocking access to other websites on accident.

Here is an example of my hosts file, you can see I have made quite a few changes. This file is usually located at /etc/hosts there is no document type just “hosts” is the name.

127.0.0.1 localhost
127.0.1.1 sogi-test
127.0.0.1 sogizmo
# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

Now this way I can type http://sogizmo and my app opens on localhost. I can open another tab and type http://sogi-test. This is also handy for testing that your app works correctly with SSL/https. I’ll cover how to do that in another article later.

Note if you add a .com to the end of your app names you block your access to the real app from your device only. That is, your PC uses the hosts file to lookup hosts before hitting your router which hits your ISP servers, which does a reverse lookup. If you have example.com in your hosts file and try to access that from your computer that you made changes to the hosts file on, it will take you to your local copy not the .com website so remember not to add the .com

I still find the old fashioned way easier for now. Plus I haven’t fully embraced Docker other than running things my app needs without installing them. I am slowly moving more towards dockerizing everything.

There is still more to do to get the app to work correctly on your system though. You will also need to configure your local server to serve pages from your apps local root directory.

I use Nginx so this is as easy as a few lines of code and a few minor changes. The files are located in /etc/nginx/sites-available. I wont cover the configuration because it is different for each app, however the location is always the same.  Here is a link about configuring Nginx. Here is the official documentation for Nginx.

Basically inside the Nginx configuration you want to set the name of the server to the same as the name you listed in the “hosts”file for me it is sogizmo.

Like so :

server_name sogizmo;

Then you need to tell Nginx where your server root is on my system for my app it is

root /var/www/sogizmo/public;

So basically that is it. You add your desired site name in the hosts file with an ip such as 127.0.0.1. Then you create your Nginx or Apache configuration and set your server to match the name you added in the hosts file. Then you set the root directory for your app. There are also other things you will need to set in the configuration based on the tech stack your app uses.