DEV Community

Cover image for How To Create Local Custom Domain on Localhost with Apache Server
Code And Deploy
Code And Deploy

Posted on • Updated on

How To Create Local Custom Domain on Localhost with Apache Server

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/apache/how-to-create-local-custom-domain-on-localhost-with-apache-server

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

In this post, you will learn how to create a local custom domain on your localhost with your apache server using Windows. This is important if you don't want to use the localhost/project_name to call your project on the browser especially if your project requires SSL.

Setting Up Custom Domain at Hosts File

In order to create a local custom domain then follow the following steps:

First, press the Windows icon on your keyword then searches notepad.

Second, if you found the notepad then right-click and then click "Run as administrator" then click Yes if a dialog box appears.

Third, then click File then click Open to your notepad. Then open the following folder "C:\Windows\System32\drivers\etc" then select All files.

Forth, then click "hosts" file then click Open.

Fifth, if your new hosts file is not yet already configured you will see this default.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
Enter fullscreen mode Exit fullscreen mode

Sixth, then copy this line "127.0.0.1 localhost" the enter the file inside then paste it. So in short we uncommented this code but we retain the default. Then now you will see like this.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
    127.0.0.1       localhost
Enter fullscreen mode Exit fullscreen mode

Seventh, we will add now our custom domains and we call it now "codeanddeploy.test" and "project.test" you can name it base on your project name then put ".test" after your project name. Now see the following below:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost
    127.0.0.1       codeanddeploy.test
    127.0.0.1       project.test
    127.0.0.1       localhost
Enter fullscreen mode Exit fullscreen mode

Now you will see above that we already added the "codeanddeploy.test" and "project.test" custom domains before the "localhost" domain.

Eighth, now we already added our custom domains. It's time to saved and close the notepad.

Setting up Apache Virtual Hosts

Now we will be setting up the apache virtual hosts for your customs domain added above to your hosts' file.

Kindly follow the following steps on how to do it:

First, open folder "C:\xampp\apache\conf\extra" then open file "httpd-vhosts.conf"

Second, in default, you will see this below in "httpd-vhosts.conf"

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>
Enter fullscreen mode Exit fullscreen mode

As you can see above code that still commented. Now we will add our virtual host.

Basic Syntax

This is the basic syntax when configuring the apache virtual host and see the comment on each line.

## Virtual host that using port 80
## We usually use it for not SSL domain
<VirtualHost *:80>
    ## Server admin email
    ServerAdmin webmaster@dummy-host.example.com
    ## Project directory
    DocumentRoot "C:/xampp/htdocs/codeanddeploy.test"
    ## Server name or your domain name
    ServerName codeanddeploy.test
    ## Alias server name
    ServerAlias www.codeanddeploy.test
##Closing tag
</VirtualHost>
Enter fullscreen mode Exit fullscreen mode

Third, not we will set up the custom domains. Here is the complete virtual host code below:

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/codeanddeploy.test"
    ServerName codeanddeploy.test
    ServerAlias www.codeanddeploy.test
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/project.test"
    ServerName project.test
    ServerAlias www.project.test
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
    ServerAlias www.localhost
</VirtualHost>

Enter fullscreen mode Exit fullscreen mode

As you can see above we have already set up our custom domains for "codeanddeploy.test" and "project.test" with their corresponding project directory. We also added the localhost below of our custom domains with the htdocs directory.

NOTE: To prevent any issues when setting up your virtual host you must put the localhost always below your custom domains.

Fourth, now we already set up our local custom domains. You must restart your xampp apache server.

Here is the result of our custom domains when opening it to your browser.

For codeanddeply.test custom domain results.

how-to-create-local-custom-domain-on-localhost-with-apache-serve

For project.test custom domain result.

ow-to-create-local-custom-domain-on-localhost-with-apache-server

Advanced Laravel SAAS Starter Kit with CRUD Generator

Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!

Now you know already how to create/add a custom domain on your local server using a virtual host. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/apache/how-to-create-local-custom-domain-on-localhost-with-apache-server if you want to download this code.

Happy coding :)

Oldest comments (1)

Collapse
 
raonigabriel profile image
Raoni Meira Gabriel

Piece of advice: take a look on local.gd/ and also on nip.io/. Those 2 services can save you precious time. Another suggestion: use the Caddy server instead of Apache (caddyserver.com/docs/#introduction)

If you are interested, I made a small example here: github.com/raonigabriel/cdp-example