How to effectively distinguish test and production site?

Question

Sometimes you might need to clone your production site to TEST site. After cloning, they look identical except the URL.

Please advise your recommended practice to distinguish front-end and back-end of your TEST site quickly and effectively so PROD and TEST cannot be accidentally confused.

Purpose:

• prevent users to enter production data into TEST site by mistake
• prevent developers (, testers etc.) to perform testing on production site by mistake

Answer 1

This is a rather very tech solution as it requires some experience in configuring Apache. The advantage is that you don't have to hack any files in the Joomla! installation itself.

Basically what I want to do is to append some HTML to any page (almost any page) being generated.

For this I will use Apache Module mod_substitute. The module itself needs to be activated (it generally just needs the # comment removed) inside httpd.conf.

LoadModule substitute_module modules/mod_substitute.so

Next in the virtual hosts file (httpd-vhosts.conf):

<VirtualHost *>
DocumentRoot "C:\...."
ServerName joomla-development

AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|</body>|<div style='position:fixed; left:100px; top:50px; background-color:red'><h1>DEV WEBSITE</h1></div></body>|i"

<Directory "C:\....">
    AllowOverride All
    Require all granted
    Order allow,deny
    Allow from all
</Directory>

</VirtualHost>

Basically with Substitute I am replacing the </body> tag with some HTML. This way I try to stay out of any Ajax request.

Final result:

Answer 2

The practice we follow is -

1. Change website-title in global configuration to [TEST] original title.
2. Change email configuration to point to mailtrap.io
3. If test site is on same server, change database details.
4. Change all third party integrations to testing account (services beyond joomla) e.g.
   • Memcache or redis
   • external database/storage
   • payment gateway,
   • newsletter system (mailchimp)
   • CDN account and domain
   • Analytics service account (google analytics, new-relic)

Answer 3

I have the same problem with clients sometimes creating content on the development version not production. I use the following to deal with this:

• Change all database and password names
• Modify the admin template with
• • A different background for login screen
• • A different colour for the top bar
• Use a module in a prominent position on the front end which clearly shows this is the production site
• On some sites I also force login to see the development site

Answer 4

Another approach is to let your browser to add CSS styles to your site.

Stylish browser plugin (for Firefox and for Chrome) is designed for this task. It applies additional custom CSS to every page at given URL. You actually define rules [URL]=>[CSS].

Above example: distinction can be made by adding solid or dotted line to the left
Red = production, Yellow = pre-prod., Green = TEST, Blue = Training, Grey = DEV etc.

Advantages:

• Can be applied to production site which is normally kept clean of visual aids.
• Can be temporarily switched off by user if needed (for example for taking screenshots).
• Universal solution – can be applied to any site or its part (based on URL path).
• Can be used without administrator access to given website.
• Setup once, no maintenance if site changes.

Disadvantages:

• Currently limited to Firefox and Chrome. (Still no problem for DEV/TEST/Support teams internally agreed on their primary browser.)
• Private sharing your style settings with other users takes a bit more work. For publicly known websites, this is not a problem – at userstyles.org (plugin's home) thousands styles already exist. Want to see StackOverflow in black or with less space between page sections?