{"id":586,"date":"2021-11-05T13:09:31","date_gmt":"2021-11-05T07:24:31","guid":{"rendered":"https:\/\/nil.pro.np\/?p=586"},"modified":"2022-04-20T06:20:46","modified_gmt":"2022-04-20T00:35:46","slug":"xampp-windows-localhost-domain","status":"publish","type":"post","link":"https:\/\/nil.pro.np\/?p=586","title":{"rendered":"How to Change localhost to a Custom Domain Name in XAMPP\/WAMP (Windows)?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/nil.pro.np\/best-domain-registrars\/\" data-type=\"post\" data-id=\"895\">Domain names<\/a> are always easy to remember and also give a professional look in local development instead of typing IP (127.0.0.1) or localhost and file directory. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default while using local development server WAMP and XAMPP, you have to type localhost\/{directory_of_web_application} or 127.0.0.1\/{directory_of_web_application} in browser.  In XAMPP\/WAMP, there is no direct one-click method like in <a href=\"https:\/\/nil.pro.np\/localwp-wordpress-development-tool\/\">localWP<\/a> to create a custom domain.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tutorial will help you to create an easy-to-use custom domain URL in WAMP and XAMPP. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s say you have your local application on localhost\/mylocalapp. After following this tutorial you can access that application with mylocalapp.test or any domain name you would like.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to convert localhost into a custom domain in XAMPP in Windows<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To set up a custom domain in localhost we have to apply the change in three places: Setting local development in XAMPP &amp; identifying directory, pointing a custom domain to local computer from Windows host file, and redirecting the domain to a specific application folder through VirtualHost.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Locate Application directory<\/strong> (folder)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, application\/website files are located inside htdocs in the main XAMPP folder. For localhost\/mylocalapp directory C:\/xampp\/htdocs\/mylocalapp.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Update Windows Host file<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, Update the Windows host file to tell the local DNS to redirect your domain into your local computer (same Computer).<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Step 1<\/strong>: Go to C:\\Windows\\System32\\drivers\\etc and edit hosts file \u201cas Administrator\u201d. [ For that open, any text editor in administrator mode then navigate to hosts file.]<\/li><li><strong>Step 2<\/strong>: Add 127.0.0.1 and custom domain at the end of file.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>127.0.0.1   mylocalapp.test mylocalapp.local<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can add as many <a href=\"https:\/\/nil.pro.np\/best-domain-registrars\/\" data-type=\"post\" data-id=\"895\">domain names<\/a> as you want by separating them with space. Or can add on each new line like: <code>127.0.0.1   mylocalapp.local<\/code><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Step 3<\/strong>: Save and close.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">After getting a request on the same localhost server, let&#8217;s tell which application to execute on a particular domain request with a virtual host.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Update Apache virtual host.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Virtual host redirects a particular domain to a specific application file directory in the server.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Step 1<\/strong>: Go to C:\\xampp\\apache\\conf\\extra and open httpd-vhosts.conf file.<\/li><li><strong>Step 2<\/strong>: Add virtual host configuration for particular URL at the end of file.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;VirtualHost *:80&gt;\n    ServerName mylocalapp.test \/\/ URl to set\n    ServerAlias mylocalapp.local \/\/ Another URl to open same Web App\n    DocumentRoot C:\/xampp\/htdocs\/mylocalapp \/\/ Application file directory (folder) in XAMPP localhost\n&lt;\/VirtualHost&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can add multiple alias names (domain name) by separating with space or can add another ServerAlias line in the new line. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Step 3: Save and close.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, your custom domain for local applications is ready.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Find More:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><a href=\"https:\/\/nil.pro.np\/best-wordpress-theme\/\" data-type=\"post\" data-id=\"761\">10 Best WordPress Themes for 2022<\/a><\/strong>.<\/li><li><a href=\"https:\/\/nil.pro.np\/best-domain-registrars\/\"><strong>Top 10 Best Domain Registrars [2022]<\/strong><\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Steps to convert localhost into a custom domain in WAMP in Windows<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we can easily add a custom domain in WAMP from Graphical Interface. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>After starting WAMP server, visit localhost in browser and click &#8220;Add a Virtual Host&#8221; on left bottom corner.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/nil.pro.np\/wp-content\/uploads\/2021\/11\/Changing-localhost-to-custom-domain-in-WAMP-server.png\" alt=\"Changing localhost to custom domain in WAMP server\" class=\"wp-image-621\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Then, add custom domain in &#8220;Name of Virtual Host&#8221; field and your local application folder path in &#8220;VirtualHost folder&#8221; field. And, click on &#8220;Start the creation of the VirtualHost&#8221;.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/nil.pro.np\/wp-content\/uploads\/2021\/11\/Adding-custom-domain-to-WAMP-Virtual-host-1024x563.png\" alt=\"Adding custom domain to WAMP Virtual host\" class=\"wp-image-622\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Now, restart the DNS server. Right click on WAMPserver icon on taskbar tray. Go to Tools and click on &#8220;Restart DNS&#8221;. Now your custom domain is configured an ready to use.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why should you use .local &amp; .test instead of .com domain in localhost?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When using already available domain extension suffixes like .com, .net, .dev, and more, there is a chance domain may already be registered and <a href=\"https:\/\/nil.pro.np\/hosting\/\" data-type=\"category\" data-id=\"12\">hosted<\/a> on the internet and may conflict while browsing these real domains with your local setup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, it&#8217;s always better to use .local and .test in the local test environment as they are <a href=\"https:\/\/en.wikipedia.org\/wiki\/Special-use_domain_name\" target=\"_blank\" rel=\"noreferrer noopener\">special-use domain names<\/a> reserved by the IETF (Internet Engineering Task Force) for these scenarios and can&#8217;t be registered in the <a href=\"https:\/\/nil.pro.np\/best-domain-registrars\/\" data-type=\"post\" data-id=\"895\">domain registrar<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">If you have any confusion following this tutorial or any topics on <a href=\"https:\/\/nil.pro.np\/\">Nil Tutorial,<\/a> don\u2019t hesitate to ask in the comment section. You can also reach me on <a rel=\"noreferrer noopener\" href=\"http:\/\/twitter.com\/knilkantha\/\" target=\"_blank\"><strong>Twitter<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Domain names are always easy to remember and also give a professional look in local development instead of typing IP (127.0.0.1) or localhost and file directory. By default while using local development server WAMP and XAMPP, you have to type localhost\/{directory_of_web_application} or 127.0.0.1\/{directory_of_web_application} in browser. In XAMPP\/WAMP, there is no direct one-click method like in&hellip;&nbsp;<a href=\"https:\/\/nil.pro.np\/?p=586\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to Change localhost to a Custom Domain Name in XAMPP\/WAMP (Windows)?<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[12,4,27],"tags":[],"class_list":["post-586","post","type-post","status-publish","format-standard","hentry","category-hosting","category-how-to","category-windows"],"_links":{"self":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=586"}],"version-history":[{"count":26,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/586\/revisions"}],"predecessor-version":[{"id":1051,"href":"https:\/\/nil.pro.np\/index.php?rest_route=\/wp\/v2\/posts\/586\/revisions\/1051"}],"wp:attachment":[{"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nil.pro.np\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}