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’t working, but you still want access now. There’s a couple of tricks for this! And we’ve got it all here for you to play with.

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.

With the preview URL some content management systems, like WordPress, might:

  1. Use a configured “Site URL” value for all links on the site, rather than relative links, meaning menu links (and sometimes even the homepage) will try to use the live URL rather than the preview URL, thus showing you the live site rather than the development site like you wanted
  2. Hard code the preview URL in media src values rather than either a relative URL or the correct live URL. (We like relative URLs as they’re better for portability but others, like the WordPress devs, prefer absolute URLs).

For WordPress users, see “Using the Preview URL with WordPress” below for a workaround.

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.

 Tip: using a HOSTS file override (Option 3 below) will avoid both of these issues and therefore make developing the site easier. Because of this we recommend using a HOSTS file override for development and only using the preview URL for showing your work to clients (read only).

Using the Preview URL with WordPress

To work around the above noted issues, complete the following two steps to instruct WordPress to allow both the live URL and the preview URL when viewing the site and to use relative URLs for media and when creating links in the WordPress admin.

STEP 1:

Use the Plesk File Manager to copy and paste the following code exactly as it is (do not replace variables with actual values) above the line in wp-config.php that says: /* That's all, stop editing! Happy blogging. */

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

STEP 2:

Login to the WordPress admin at <preview_url>/wp-admin. Go to Plugins > Add New and search for “Absolute <> Relative URLs” and install and activate this plugin. Although you won’t *see* a difference while working in the admin, it will save all links as relative URLs to the database, but present them on-site as absolute URLs to keep WordPress happy. When you make the site live, all URLs will switch to the live domain automatically.

 Upon Rollout: 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. Do not remove the WP_CONTENT_URL value, otherwise you may experience odd issues with media. You should also be able to remove the “Absolute <> Relative URLs” plugin at this time and all future URLs will be stored in the DB as absolute values using the live domain name.

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’.
    Please note: if your DNS is not hosted with us, you’ll now need to login to your DNS host (often the registrar) and add a new DNS record of type “A” that points to the IP for your hosting with us as shown in Plesk. It may take a few hours for the new DNS record to take effect.
  2. Install WordPress to the new subdomain using 1-click web apps (or clone it from the main site if you don’t wish to start from scratch).

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. If you haven’t already done so, reconfigure your domain to make it live.

Option 3: HOSTS File Override (Advanced)

Quick Intro to DNS

Whenever you visit a website like websavers.ca or google.com, your computer asks your DNS server, usually supplied by your Internet provider, for the numerical IP address of the server the site lives on (they look like this: 123.123.123.123). When the domain is either not yet registered or not yet pointing to your Websavers hosting plan, your DNS servers are either going to say “Sorry, I don’t know” or provide the currently live IP address, rather than the one for your Websavers hosting.

The following steps will show you how to instruct your computer to use a specific IP/server every time you visit your website and override the currently live IP address.

Overriding DNS with the hosts file

Windows, Linux and macOS all use a special file known as the hosts file to manually convert names to numbers. Your computer looks at the hosts file before checking with your DNS servers to get the matching IP, so when you want to instruct your computer what server your website resides upon, this is the file to use!

Here is the location of the file on Windows, Linux and macOS:

  • Windows: c:/windows/system32/drivers/etc/hosts
  • Linux: /etc/hosts
  • Mac OS X: /etc/hosts

How do I use my hosts 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:
[ServerIPAddress] [DomainName1] [DomainName2]
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.

You can edit this file directly using your favourite text editor, but note that it’s not always easy to access their locations. Windows typically hides that system folder, and macOS has it classified as part of its Unix subsystem which makes it unreachable in the file browser (Finder). We’ve listed a few handy utilities below for each operating system that will make it easier to edit your hosts file.

Handy hosts file editing tips

macOS

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!

You could alternatively use a terminal-based text editor like vim. Open terminal and run:

vim /etc/hosts

. But be warned, vim isn’t the easiest to use! You should look up a vim tutorial before going with this option.

Windows

On Windows you can install an app called Windows Hosts File Editor and use that to help you edit the hosts file.

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!

Troubleshooting

THEME RESOURCE PROBLEMS: If you are using the preview URL with our wp-config.php overrides, and you notice theme resources not loading properly on both the front-end and in the WordPress admin, it’s because you placed the overrides at the very bottom of the wp-config.php file — they must be placed above the “stop editing” warning as described above!

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.