How to preview your website before the name servers or DNS records are live

There’s a few common situations where you want to be able to easily view your website, but you can’t yet because your domain isn’t pointing to your hosting account:

1. Development: The site is still being developed and so the domain is pointing to a different hosting account where the prior live site resides. (Your development site is not live to the public at all).
2. Testing: You have migrated the site content, and you wish to test to be sure it’s working smoothly before changing the DNS.
3. Waiting: You want the site to go live now, but you’re still waiting on the name server or DNS record changes to propagate to your Internet provider. (Note: an alternative to make these DNS changes go faster is to use a faster-updating DNS service on your devices)

Regardless of which situation applies to you, it can be assumed that visiting the website in a browser either isn’t working at all, or is showing a different (older/live) version of the site, yet you still want access now.

There’s a few tricks for this! You can:

1. Use the Plesk preview URL This is the quickest option, but if you’re using WordPress, it requires adjustments to the wp-config.php to work smoothly.
2. Use a subdomain instead This option is easy to implement, but requires that we host the DNS or that you have access to the DNS host to manually create records.
3. Use a HOSTS file override This is a bit harder to implement, however once you’ve made the necessary adjustments to your computer, it is the best way to test or edit a website that’s not live.

Scroll to your preferred option to learn how it’s done.

If your WordPress hosting is with us and you’re a Hands-On Support subscriber, you can also request we take care of either option 1 or option 2 for you!

Option 1: Use the Plesk preview URL

To find the Plesk preview URL, log in to Plesk then look right under the blue header where it shows your domain name. You’ll find a button that says “Preview” with an eye icon. Click it to be taken to your site via the preview URL.

Caveats to Using the Preview URL

There’s a couple things to watch out for when using the preview URL with a content management system like WordPress. The issues and solutions described should be similar for any web app, so if you’re not using WordPress, you’ll need to look into how to accomplish these changes with your web app.

1. WordPress, will ‘break’ you out of the preview URL and force you to the live URL when you click on any links on the site. This isn’t very helpful, as you want to remain viewing/working on the site at the preview URL, not the live site!
2. Any media you upload or links you create in WordPress while using the preview URL will be hard-coded with the preview URL and not your live URL, which will absolutely cause problems when you go live. Many web hosts (including costly managed WordPress hosts) provide no mechanism whatsoever to resolve this problem, but they should, because it can cause some serious problems with your website either upon go-live or later on.

To work around these issues, complete the following 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 notice a difference while working in the admin, using this plugin means WordPress will save all links as relative URLs to the database such that when you make the site live, all URLs will switch to the live domain automatically.

Upon Rollout: It’s important for SEO to ensure you remove the custom WP_HOME and WP_SITEURL configuration values when the site goes live. However, do not remove the WP_CONTENT_URL value, otherwise you may experience odd issues with media. You can also remove the “Absolute <> Relative URLs” plugin at this time such that all future URLs will be stored in the DB as absolute values using the live domain name.

STEP 3:

Login to Plesk and choose “Hosting Settings” for the domain. Uncheck the option to use an SSL/HTTPS redirect. This redirect will force https, which you cannot use when using the Plesk preview URL.

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’, ‘staging’, ‘new’, or ‘preview’.
   Please note: if your DNS is not hosted with us, you’ll 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. At this point, if you haven’t already done so, you can reconfigure your domain at the registrar or DNS host to make it live.

Option 3: HOSTS File Override (Intermediate)

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 the website, overriding 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
• macOS: /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: 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!

[Advanced] 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!