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:

• 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).
• Testing: You have migrated the site content, and you wish to test to be sure it’s working smoothly before changing the DNS.
• Waiting on DNS: You want to view or login to the site 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 are a few tricks for this! You can:

1. Use a subdomain: This option is easy to implement if we host your DNS. If we don’t, you’ll need to know how to create a DNS record wherever your DNS is hosted.
2. Use a HOSTS file override: This option tricks your computer into thinking the site is live.
3. Use the Plesk preview URL: This option doesn’t support https (so you get browser security warnings that you have to bypass) AND if you’re using WordPress, it requires adjustments to the wp-config.php to work smoothly.

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 ask us to set up option 1 for you!

Use a Subdomain to preview your site

Here’s how to preview your site on a subdomain:

1. Login to Plesk
2. In Plesk, choose the option to Add a Subdomain and call it something like ‘dev’, ‘staging’, ‘new’, or ‘preview’. (Note: if your DNS is not hosted with us, you’ll need to login to your DNS host and add a new DNS record of type “A” that points to the IP for your hosting as shown in Plesk.)
3. Use 1-click web apps to Install WordPress, migrate WordPress from your old host, or create a staging clone of WordPress from the main domain. Your installation/migrate/clone target will be the new subdomain. Note: you can do the same for any web app, like Modx or Joomla.

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, or if you used our WordPress staging guide, you can sync it back to the main domain.

Use a HOSTS File Override to preview your site

Completing the following steps will instruct your computer to override the server IP that’s hosting your website every time you visit the URL.

Overriding DNS with the hosts file

Every operating system has a special file known as the hosts file that can override live DNS by manually convert names to numbers. Your computer looks at the hosts file before checking with your Internet Provider’s DNS servers, which makes it the perfect place for overrides.

Warning: to prevent weird issues in the future, make sure to remove any custom entries from your HOSTS file after you’re done previewing the site.

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 to format entries in the hosts file

The key to entering info accurately in the hosts file is by using the following format:
[ServerIPAddress] [DomainName] [www.DomainName]
So, for example, websavers.ca could look like this, if we want its server to be at that IP:

64.131.80.122 websavers.ca www.websavers.ca

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 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 install it.

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 any site you need to preview before it’s live.

Create a new entry then pop in the IP and domain name using the format above on a new line of its own. Select the host file you want active on the left, then click the checkbox in the toolbar to activate it. All set!

Linux or macOS

Edit the file using a terminal-based text editor like vim. Open terminal and run one of the following two lines depending on your preferred editor. Nano is easier to use for first time users.

vim /etc/hosts
nano /etc/hosts

Windows

On Windows you can install an app called Windows Hosts File Editor 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 c:/windows/system32/drivers/etc/hosts
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!

Use the Plesk preview URL

To find the Plesk preview URL, log in to Plesk then hover over the image that represents your website. You’ll find a button that says “Preview” with an eye icon. Click it to be taken to your site via the preview URL.

This is our last recommended option because it has many issues:

1. Incapable of using HTTPS: It does not work with HTTPS/SSL, so when you visit the URL your browser is going to give you a big security warning. You can bypass it, but it doesn’t always work smoothly. There is no consistent workaround for this.
2. WordPress URL Problems: WordPress, and other content management systems, do not play nice unless you’re using the expected URL for the site. Because of this various things won’t work as expected, such as links on the site and media (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). Workarounds for all of this below.

Forcing WordPress to accept the preview URL

To work around these issues complete the following steps to instruct WordPress to allow the preview URL when viewing the site and to use relative URLs for media and 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.

The plugin 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.

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.

When you no longer need the preview URL: 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.

Troubleshooting Preview URL Issues

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!