How to set up “.local” domain names in Ubuntu

Let me first tell you what I mean by “.local” domains. These are the domains that you can access directly from your local machine.

Instead of “.local”, you can use whatever domain you want to use. There are many benefits of using these local domains. In this guide, I will show you how you can exactly configure these domains for your local development environment.

I will cover both the most popular web servers called Apache and Nginx. So, No matter you are using Apache or Nginx, you can follow this guide.

Note that these domains are only accessible on your local machine. And there are many benefits of using local domains if you are a developer. Let’s get started with the benefits of setting up these domains.

You can access multiple applications at a same time. For example, You can run App1 on “app1.test” and App2 on “app2.test”. And it makes it easier to remember the URLs of our applications on local environment. Changing Environment also feels easier.

So, let’s get started with the actual tutorial and see how it works.

Add entry in /etc/hosts file

The first thing we have to do is to edit our /etc/hosts file. By default, It looks something like this.

127.0.0.1 localhost
127.0.1.1 HOSTNAME

# 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

In this file, we have to add one more line in the first IPv4. In this article, I will create example.test domain name. You can replace it with whatever domain you want.

So, After adding the new line in the IPv4 part of the file, It should look like this.

127.0.0.1 localhost
127.0.0.1 HOSTNAME
127.0.0.1 example.test

You can add as many domains as you want in the same way. Now, Our system will route example.test to our local system instead of sending it to the internet. Now, It’s our local web server’s responsibility to handle the request and route it to the specific directory.

It’s means, we have to create Virtual hosts in our web server configuration. I will cover both Apache and Nginx. But let’s get started with Apache.

Create Virtual hosts in Apache

In this guide, I am going to call my application example with example.test domain name. So, I will create a file in Apache’s virtual host configuration directory using the following command.

$ sudo nano /etc/apache2/sites-available/example.conf

And, I will add following configuration in the Apache Virtual Host.

<VirtualHost *:80>

ServerAdmin username@examplemail.com
ServerName example.test
DocumentRoot /path/to/project/example/public_html

ErrorLog /var/log/apache2/example-error.log
CustomLog /var/log/apache2/example-access.log combined

</VirtualHost>

Now, press CTRL+X followed by Y and Enter to save the file. Now, We have to activate this configuration and reload the apache configuration to apply changes. To perform this task, Execute the following commands.

$ sudo a2ensite example.conf
$ sudo service apache2 reload

Now, open the new tab in your browser and try to access your equivalent of example.test. Can you see your project working as expected? If so, You have followed the process perfectly. If not, you can try again.

Create Virtual Host in Nginx

It’s the same process as Apache. But the syntax of Nginx configuration are very different than Apache and the process to activate the virtual host is also kind of raw. So, let’s see how we can do this in Nginx.

First of all, create a virtual host file in Nginx using the below given command.

$ sudo nano /etc/nginx/sites-available/example.conf

And then, populate the file with the following code.

server {

listen 80;
server_name example.test
root /path/to/project/example/public_html

access_log /var/log/nginx/example-access.conf
error_log /var/log/nginx/example-error.log

}

After creating virtual host, Save it using CTRL+X followed by Y and Enter. Now, we have to activate the virtual host by creating a link of our virtual host file to another directory. Create it using the following command.

$ sudo ln -s /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/example.conf
$ sudo service nginx reload

Open up a new tab in your browser and try to access your equivalent of example.test and see if it works properly. If it is working, Enjoy the advantages you get.

So, this is how you can create local domains for development purposes. There is one more thing I want to mention in this tutorial. If you are developing on Chrome, do not use .dev domain name as Google Chrome will force redirect the URL from http to https.

Let us know if you are facing any issue following this guide or have any question regarding this tutorial.

Leave a Reply