How to preview your website before the name servers are updated

There’s a couple of common situations where you want to be able to easily view your website when you can’t because the domain isn’t yet pointing to your hosting account:

  1. Development: The site is still under development and the domain is pointing to the old live site still
  2. Waiting & Testing: You’ve set up your hosting and want it to go live now, but you’re still waiting on the name servers to update, and/or you wish to test the site prior to making it live.

In either case, in can be assumed that visiting yourdomain.com in a browser isn’ working. There’s a couple of tricks for this! And we’ve got it all here for you to play with. This is great for when you first signed up for a web hosting package and are patiently waiting but want to start uploading content right away.

Option 1: Use the Plesk preview URL

To find the Plesk preview URL, log in to Plesk then look right under the blue header with your domain in it. You’ll find a button that says “Preview” with an eye icon. Click it to be taken to your site via the preview URL. Use this URL rather than what will be the live URL during development.

The downside to this option is that some content management systems (like WordPress) will:

  1. Use a configured “Site Url” value for all links on the site, rather than relative links, meaning menu links will try to use the live URL rather than the preview URL, thus showing you the live site rather than the development site when you’re navigating around
  2. Use your preview URL for media rather than the correct live URL.

Similar issues may occur with other content management systems, so be sure to keep an eye on this type of behaviour when using a preview URL! Using a HOSTS file override will avoid both of these issues.

WordPress users can insert the following lines in their wp-config.php file (we recommend placing them below the database config section) in order to avoid the above noted issues:

define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME']);
define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME']);
define('WP_CONTENT_URL', '/wp-content');

The first two values (WP_SITEURL and WP_HOME) tell WordPress that instead of using only http://yourdomain.com as the site’s URL, it should be using whatever URL you entered in the browser’s address bar. Don’t worry, no other URLs will work other than the actual URL for the site and the preview URL because the web server is only configured by Plesk to respond on those addresses.

The WP_CONTENT_URL value indicates that uploaded content should use relative URLs and not include your domain within. This way when you add new images and other media, they won’t be coded to use the live domain (called absolute URLs).

Note that you’ll still need to keep an eye out for situations where the absolute URL is used, such as when configuring your menu options in WordPress.
It’s very important from an SEO perspective to ensure you remove the custom WP_HOME and WP_SITEURL configuration values when the site goes live.

Option 2: Use a Subdomain (Intermediate)

If your reason for wanting to not make your site live yet is because you’re planning on developing a new site first, this option is a good one for you.

  1. In Plesk, choose the option to Add a Subdomain and call it something like ‘dev’, or ‘new’, or ‘preview’.
  2. Install WordPress there using 1-click web apps (or clone it from the main site if you don’t wish to start from scratch).
  3. If your DNS is not hosted with us, you’ll then need to login to your DNS host (often the registrar) and add a new DNS record of type “A” that points to the IP of your hosting with us — this is shown in Plesk.

The DNS record addition might take a few hours (up to 24) to take effect, but when it does, you’ll be all set to develop on your dev subdomain.

When you’re ready to take the site live, use our 1-click web apps utility to clone it from the dev subdomain over to the main domain, then update your DNS settings to make it live.</p>

Option 3: HOSTS File Override (Advanced)

Quick Intro to DNS

Whenever you access a domain name like websavers.ca or google.com, your computer accesses your DNS server (usually supplied by your internet provider) in order to obtain the actual numerical IP address of the server the site lives on. Before you register your domain name, or at least before the name servers are updated, your computer will ask your DNS servers to get the IP address for yourdomain.com, but the DNS server will return “Sorry, I don’t know”. This is why you must tell your computer, “I know where that name should point to: here’s the address.” All operating systems provide a special file for overriding name-to-number resolution: the hosts file.

Overriding DNS with the hosts file

Windows, Linux and Mac OS X all use a special file known as the HOSTS file to manually convert names to numbers. Whenever you visit a name like websavers.ca or google.ca, your computer looks at this file before querying your DNS servers to find out what their real IP addresses are. Thus, when you want to tell your computer what server your website resides upon, this is the file you do it in.

First up: where is the HOSTS File?

Here is the location of the file on Windows, Linux and Mac OS X.

  • Windows: c:windowssystem32driversetchosts
  • Linux: /etc/hosts
  • Mac OS X: /etc/hosts

How do I correctly use this file?

The file may have some information in it at the top – normally information about how to use the file. The key to entering info accurately in the hosts file is by using the following format:
[Server IP Address] [Domain Name]
So, for example, websavers.ca might look like this:

64.131.80.122 websavers.ca www.websavers.ca

Note that I’ve included both websavers.ca and www.websavers.ca just in case we try to access the site by either method. You should do the same, otherwise you might see some strange results.

How to Edit The HOSTS File

Mac

If you’re using a Mac, head on over to the Gas Mask Google Code project page and get installing!

This app opens up your hosts file automatically and allows you to save it by writing over the current file. You also have the option of saving multiple hosts files and easily switching between them. This way you can save a default as well as a different one to easily activate and deactive each site you’re working on. Simply create a new one and throw in the IP and site name using the format above. Select the host file you want active on the left, then click the checkbox in the toolbar to activate it. All set!

Windows

On Windows you can download a similar app called Windows Hosts File Editor. Rather than navigating to the hosts file and editing it, just open up Windows Hosts File Editor, and you’re all set to go.

Alternatively you can manually edit the file with Notepad. Here’s how:

  1. Open the Start Menu and search for Notepad
  2. When you see Notepad in the results, right click and choose “Open as Administrator” (say yes to approve the security prompt)
  3. Choose File > Open from the menubar and navigate to the directory shown above
  4. The directory will appear to be empty. On the far right side of the “File name:” box at the bottom of the window, click the drop down that sats “Text Documents (*.txt)” and select the option for “All Files”. This will show the hosts file in the list above.
  5. Double click on the hosts file to open it
  6. Below the last line with a # in front of it, type in your entry using the same pattern as shown above — [IP]   [Domain]
  7. Choose File > Save from the menu
If you get a Forbidden error about permissions indicating that “You do not have permission to access this document”, then you skipped step #2. You must run Notepad as administrator in order to have permission to update the file. Please close Notepad and start again.

Have any trouble making these apps work? Have an even better app to edit the HOSTS file? Something wrong with the directions? Use the comments below to tell us!

Jordan is a computer, security, and network systems expert and a lover of all things web and tech. Jordan consults with project management for software companies. Jordan is a founder and managing partner at Websavers Inc.