Preview website before making DNS changes on cPanel

For an easy way to view your site before go-live, without any DNS modifications then you can use the https://hosts.cx/ tool online

cPanel / WHM provides a very basic ‘Preview URL’ which looks similar to… http://1.1.1.1/~username This has a few limitations, however…

• ‘Rewrites’ in the .htaccess files don’t really work as expected and generally cause issues with the display of sites powered by WordPress, Joomla etc
• To view a WordPress site via the preview URL, you would need to amend the URL’s in the Settings -> General screen of WordPress (far from ideal)
• It's ugly! Providing this to a potential / development client isn’t great, and reveals your servers IP address directly
• If you don’t have WHM, then you have to work the link out! There is no link to this URL from within cPanel itself
• You can’t install an SSL to the temporary URL, therefore if your site uses https:// you can’t use it

The Solution

We have developed our own ‘Website Preview’ plugin for cPanel, which allows you to see your sites, exactly as if the DNS was pointing. It also resolves all of the above quirks! This works by creating an ‘Addon’ domain for your site, which is a subdomain of your server's hostname (username.server.cloudns.io)

WordPress

By default, just using an Addon domain would still cause problems with redirects / the configured URL of WordPress. As such, we needed a solution for this. We have developed our plugin to automatically detect, and patch your wp-config.php file automatically, allowing the preview URL to work perfectly.

How to use

Simply go to cPanel -> Domains -> Website Preview

The cPanel (Linux) Temporary URL:

Every cPanel user’s main domain is accessible via the IP address of the server and their username. For example:

http://1.1.1.1/~username

(You will need to replace the “IP Address” with the actual IP Address of the server, as well as “username” with your cPanel user to utilize this). The following addresses will bring you to the contents of your main public_html folder, you can append subfolders to the URLs for further testing if needed, for example:

http://1.1.1.1/~username/subfolder/anotherfolder/yetanotherfolder/

How To Change your Computer’s Hosts File:

Temporary URLs work well in most cases, but in other cases some content management systems rely heavily on DNS and redirections in order to function properly, making testing via temporary URLs difficult as clicking links will take you to the domain name again, itself. In cases like this – we update the hosts file for testing on your local PC. One thing to keep in mind, regardless of which operating system you use at home, you can simply add your host information to the bottom of the file – in the following format:

X.X.X.X domain.com
X.X.X.X www.domain.com

X.X.X.X will be the IP address we are going to force your computer (and only your computer) to resolve the domain to. This will be the IP address assigned to the domain name. Domain.com will be the domain name to test prior to updating the DNS. Another thing to keep in mind when testing your site using the hosts file method- after updating your hosts file, you will need to clear the cache and cookies from your web browser and restart the browser in order for things to take full effect. In some instances, you may need to flush your DNS cache on the local system as well.

Updating a Hosts File on Windows:

Go to Start -> All Programs -> Accessories Right-click on Notepad, and select “Run as Administrator” Click “Continue” at the UAC prompt. In the notepad application – From the toolbar, go to File -> Open Open the Following File:

C:\Windows\System32\drivers\etc\hosts

(This path may vary based on your drive/installation configuration, and you may need to choose the file type to open from the drop-down menu as “All Files” in order to see your hosts file). Add your new host entry to the bottom of the file and save.

Updating a Hosts File in Linux:

Open up your favorite terminal application (Most flavors store the default terminal application in the Accessories folder). Also, in this example, we are using the text editor called “nano” which is pre-installed on most Linux distributions. You may also use other text editors such as vim or emacs if you wish. If you are already logged in as user root, run:

nano /etc/hosts

If you are logged in as a non-root user, run:

sudo nano /etc/hosts

Then authenticate with your password to grant root access. Once the text editor application opens, add your new host entry to the bottom of the file and save.

Updating a Hosts File on a Mac:

You will need to launch your Terminal, which you can search for using Spotlight, or you may also access this via Applications/Utilities Once the terminal application has launched, type the following into the terminal command line: sudo nano /private/etc/hosts Enter the Administrator password. After the file has opened, add your new host entry to the bottom of the file and save. Again, make sure you clear the cache from your browser and in some cases the DNS cache may need to be flushed as well._After you update the DNS for your site, make sure to remove any host entries that you may have added during the process to ensure the domain is resolving in the same manner on your local system as other users on the internet!