How to create a development environment

This guide will show you how to create a development environment and how to then make your development site live again. It applies to our specialized software configuration which makes use of Plesk 12.5 (or newer) control panel and Installatron for easy web application management. If you are not hosted with us, but your web host uses these tools as well, then this guide will work great for you too.

Begin by Logging in to Plesk.

Creating a Development Environment

Part 1: Create subdomain

We’ll start by creating a development subdomain. Please note that if your DNS is not hosted with us (ie: managed within Plesk alongside your website) then you will need to create the subdomain DNS A record wherever your DNS is hosted.

  1.  In Plesk, choose the “Add Subdomain” button
  2. You can enter whatever you like for the name. We suggest “dev” or “new”.
  3. Be sure to select the correct parent domain — this should be the domain you’re making a development environment for.
  4. If you wish to customize the document root folder name, go for it! Sometimes we prefer to use ‘development’ rather than ‘dev.<domain>’ as the folder name. It’s up to you.
  5. Press the OK button to save your changes.
Note: If you’re building a new site from scratch using WordPress or another CMS… follow this guide to install the content management system of your choice, and select the development subdomain as the target directory. If you’ll be starting with the old site’s content, then read on to learn how to clone the live site to the development subdomain.

Part 2: Copy the site content to the development subdomain

If you’ve got a web application like WordPress, Magento, or Modx managing your site, use these steps:

  1. In Plesk choose the 1-click web apps (or Installatron) button. In most cases you’ll find this on the right side of the page where you see your list of domains hosted under the account.
  2. Find your application in the list. For example in many cases this will be a WordPress installation. If you do not find your app in the list, learn how to import it into 1-click web apps here.
  3. Clone your app using the button with the two side-by-side arrows pointing down. More details on this process here. Your destination for the clone will be the new subdomain you created in Part 1.

And that’s all there is to it! You’ve now got yourself a development environment located at the subdomain URL you specified in part 1. Your login credentials for your app will be identical to the ones you used on the live site.

You should now lock down the development site so as to prevent indexing by search engines. Here’s how to prevent indexing with WordPress.

If you do not have a web application, use these steps:

  1. Use Plesk’s File Manager to find the folder that your website resides in. Oftentimes, with your primary domain, this will be the httpdocs folder.
  2. Select all the contents in the folder, and click “add to archive” in the menu bar. Create a name for the archive and click OK.
  3. Click on the archive to highlight it, and use the “Move” button in the menu bar to move the archive to the folder for the subdomain. for example, /dev.yourdomain.tld
  4. Navigate to the folder for the subdomain, click on the archive, and select “extract archive”.

That’s it! You’ve moved your static or custom coded website to a new location. With some custom built sites, primarily ones built in PHP, you may need to adjust for the change of the root path from /httpdocs to /dev.yourdomain.tld. Talk to your developer if you experience any problems after this sort of move!

You should now lock down the development site so as to prevent indexing by search engines. Here’s how to prevent indexing of your development site.

Considerations prior to making the dev site live

There’s a few things to note about development with cloned sites:

  • If you will not be updating any content (posts, pages, etc) on the live site while the site is under development (recommended, if possible), then the best way to roll out the new site is to clone it again: see below for details!
  • If you will only be editing the files that run the site, such as WordPress or Magento theme files, and *not* anything that adjusts the database (such as theme settings), then edit your files on the dev site. When you’re done making your changes to the development environment use FTP or Plesk’s file manager to copy over only the files you’ve edited to the live site. Many themes (at least for WordPress) come with an option to export and import their settings, so you may also be able to move the settings from your dev site over to the live site without ‘interrupting’ the live database of posts, pages, products, orders etc.
  • If there will be new posts and pages published during development, an alternate approach to making the development site live is to make note of the date you cloned the site. Once you’re ready to go live, export all posts, pages, and other data that have been published since that date, then import them into the development site, thus bringing its content up to date. Then follow the steps below to make the now ‘updated’ development site live via clone.

Making the development site live

Please see the considerations above prior to completing these actions. Note that these steps will produce a downtime of typically just a few minutes, though if you have a particularly large filesize to your website, it could be longer.

When you’re ready to go live with your development site, complete the following steps:

If your new site is in 1-click web apps:

  1. In Plesk choose the 1-click web apps (or Installatron) button. In most cases you’ll find this on the right side of the page that contains your list of domains hosted under the account.
  2. Find your live application install in the app list (the one installed to your domain and not subdomain.domain.com). Click the curved arrow button to complete a backup, then choose the X button to remove the app.
  3. Find your development application install in the list of web apps
  4. Clone your development app using the button with the two side-by-side arrows pointing down. More details on this process here. Your destination for the clone will be the live domain as we are copying the site from development to the live URL.
If you get an error like “! An instance of wordpress already exists in this directory.”, this means you didn’t remove the app as described in step 2. Please try step 2 again, then when the app installed to the live URL is fully removed, you can proceed to clone the dev app over to the live URL.

If your new site is static HTML / Custom coded

  1. Backup the live site files, then remove them using FTP or the Plesk File Manager
  2. Use Plesk’s File Manager to find the folder that your development website resides in.
  3. Select all the contents in the folder, and click “add to archive” in the menu bar. Create a name for the archive and click OK.
  4. Click on the archive to highlight it, and use the “Move” button in the menu bar to move the archive to the folder for the live domain. This is often /httpdocs for the primary domain
  5. Navigate to the folder for the domain, click on the archive, and select “extract archive”.

Troubleshooting

After follow the directions above, if you find certain elements are not loading correctly, like fonts, check to make sure that any locations where you’ve applied custom code (like loading a custom font), you manually update the URL to the new URL (whether dev or live). Better yet, change it to a relative path. For example if your URL is http://websavers.ca/wp-content/photo.jpg you could simply change that to /wp-content/photo.jpg and it would then work no matter what URL you’ve cloned the site to.

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.

Leave a Comment