{"id":614,"date":"2021-05-24T12:58:24","date_gmt":"2021-05-24T10:58:24","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=614"},"modified":"2021-05-31T17:27:08","modified_gmt":"2021-05-31T15:27:08","slug":"alias-localhost","status":"publish","type":"post","link":"https:\/\/strawberrycode.com\/blog\/alias-localhost\/","title":{"rendered":"How to create an Alias for your Local Website (bye localhost!)"},"content":{"rendered":"\n<p>Tired of having <code>localhost<\/code> in your URLs? Do you want to have a more professional-looking URL in your browser? It is so easy to set up, you won&#8217;t be able to <s>live<\/s> code without it anymore! So let&#8217;s have a look, shall we?<\/p>\n\n\n\n<h2>Meh, localhost is fine&#8230;<\/h2>\n\n\n\n<p>Okay, no problem! Let me just give you the reasons why I use aliases: <\/p>\n\n\n\n<ul><li>Cleaner URLs: visually easier to see what&#8217;s going on in the URL,<\/li><li>No more configuration errors (ports, &#8230;),<\/li><li>No routing errors with a development environment closer to the production environment: you will have the exact same URLs in development and production. <br>It is especially useful when working with MVC-like frameworks or WordPress, for instance.<\/li><\/ul>\n\n\n\n<h2>Alright, let&#8217;s change that hostname<\/h2>\n\n\n\n<p>Changing the <code>hostname<\/code> from <code>localhost<\/code> to <code>mywebsite.com.local<\/code> is an easy 2-steps process when you are using a web server like Apache, for example. And may be reduced to step 1 otherwise.<\/p>\n\n\n\n<h3>Step 1: editing Hosts file<\/h3>\n\n\n\n<p>Open the hosts file: <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ for Unix\/MacOS: \/etc\/hosts\n\/\/ for Windows: C:\\Windows\\System32\\drivers\\etc\\hosts\n$ sudo vim \/etc\/hosts<\/pre>\n\n\n\n<p>Add the IP address and hostname:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">127.0.0.1    mywebsite.com.local<\/pre>\n\n\n\n<p>Save and quit:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ type Esc, then:\n:x<\/pre>\n\n\n\n<h3>Step 2: editing the Virtual Host file<\/h3>\n\n\n\n<p>Open the Virtual Hosts file at: <code>\/Applications\/MAMP\/conf\/apache\/extra\/httpd-vhosts.conf<\/code> (you can make a backup copy, just in case ;) )<\/p>\n\n\n\n<p>Add the following: <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;VirtualHost *>\n\tServerName mywebsite.com.local\n\tServerAlias mywebsite.com.local\n\tDocumentRoot \"\/Applications\/MAMP\/htdocs\/mywebsite\"\n\n\t&lt;Directory \"\/Applications\/MAMP\/htdocs\/mywebsite\/\">\n\t\tOptions FollowSymLinks MultiViews\n\t\tAllowOverride All\n\t\tOrder allow,deny\n\t\tallow from all\n\t&lt;\/Directory>\n&lt;\/VirtualHost>\n<\/pre>\n\n\n\n<p>Of course, you will need to adapt the name and route to match your config.<\/p>\n\n\n\n<p>And last but not least, make sure the <code>httpd-vhosts.conf<\/code> file is included (not commented out) in  <code>\/Applications\/MAMP\/conf\/apache\/httpd.conf<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"968\" height=\"108\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/httpd_conf.png\" alt=\"\" class=\"wp-image-617\" srcset=\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/httpd_conf.png 968w, https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/httpd_conf-300x33.png 300w, https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/httpd_conf-768x86.png 768w\" sizes=\"(max-width: 968px) 100vw, 968px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&#x1f4a1; Last tip: using <code>.com.local<\/code> as an extension is a safe choice, it will keep the general aesthetic of the URL, but clearly indicates the purpose of the hostname. Plus it is safe as an extension for the third-party tools you may use!<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>I hope it helps, feel free to <a href=\"https:\/\/www.buymeacoffee.com\/strawberrycode\" target=\"_blank\" rel=\"noreferrer noopener\">buy me a coffee (or tea)<\/a> to support the blog &#x1f642;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tired of having localhost in your URLs? Do you want to have a more professional-looking URL in your browser? It is so easy to set up, you won&#8217;t be able to live code without it anymore! So let&#8217;s have a look, shall we? Meh, localhost is fine&#8230; Okay, no problem! Let me just give you the reasons why I use aliases: Cleaner URLs: visually easier to see what&#8217;s going on in the URL, No more configuration errors (ports, &#8230;), No routing errors with a development environment closer to the production environment: you will have the exact same URLs in development &hellip; <a href=\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to create an Alias for your Local Website (bye localhost!)<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":630,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[115],"tags":[123,5,121,117,116],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create an Alias for your Local Website (bye localhost!) - StrawberryCode<\/title>\n<meta name=\"description\" content=\"Tired of having localhost in your URLs? Do you want to have a more professional-looking URL in your browser? Let&#039;s alias that hostname!\" \/>\n<link rel=\"canonical\" href=\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create an Alias for your Local Website (bye localhost!) - StrawberryCode\" \/>\n<meta property=\"og:description\" content=\"Tired of having localhost in your URLs? Do you want to have a more professional-looking URL in your browser? Let&#039;s alias that hostname!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\" \/>\n<meta property=\"og:site_name\" content=\"StrawberryCode\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-24T10:58:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-31T15:27:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/alias-hostname.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"StrawberryCode\",\"description\":\"Fruit for Thought\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/strawberrycode.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/alias-hostname.png\",\"contentUrl\":\"https:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/05\/alias-hostname.png\",\"width\":1280,\"height\":720,\"caption\":\"Alias Hostname\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/#webpage\",\"url\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\",\"name\":\"How to create an Alias for your Local Website (bye localhost!) - StrawberryCode\",\"isPartOf\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/#primaryimage\"},\"datePublished\":\"2021-05-24T10:58:24+00:00\",\"dateModified\":\"2021-05-31T15:27:08+00:00\",\"author\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\"},\"description\":\"Tired of having localhost in your URLs? Do you want to have a more professional-looking URL in your browser? Let's alias that hostname!\",\"breadcrumb\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/alias-localhost\/\",\"name\":\"How to create an Alias for your Local Website (bye localhost!)\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\",\"name\":\"StrawberryCode\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/614"}],"collection":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":5,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions\/622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media\/630"}],"wp:attachment":[{"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}