How to visually distinguish build environments in Laravel

I have designed a simple solution to visually distinguish between dev, test, stage and production environments within my Laravel application.

What is the difference between build environments?

Dev - local
Test - unstable code, seeding data (UAT’s)
Stage - pre-production
Production - live

Laravel Solution

The method I used was to make some styling change depending on the environment specified within the Laravel configuration files. This solution is customisable and can be used to distinguish any of the environments listed above, from one another.

We have many environments from dev, test, stage, and production. In organisation I first created this solution for, we also have a production test environment. This is the version of the application that I want to customised in this case.

You can see the types of env.display values that are available in this example:

 @if(@config('app.env.display')=='production-test')     //style test
 @if(@config('app.env.display')=='production-live')     //do nothing
 @if(@config('app.env.display')=='stage')               //do nothing

This is the few lines of code that provide customisation be overriding the main CSS styling.

In this case, we create and SVG image on the fly, consisting of the the word ‘test’ in the colour red. I then overlay this on a powder blue background colour.

 @if(@config('app.env')=='production-test')
 <!-- Override CSS for to display background 
	indicating testing instances -->
 <style>
 #content {
            background-image: url("data:image/svg+xml;utf8,
			<svg xmlns='http://www.w3.org/2000/svg' 
				version='1.1' height='100px' 
				width='100px'>
			<text transform='translate(20, 100) 
					rotate(-45)' 
					fill='rgb(245,45,45)' 
					font-size='40'>test</text>
			</svg>");
            background-color: powderblue;
 }
 </style>
 @endif	

Using this script snippet above, this now means that the user can instantly recognise they are on a particular instance of the application.

Why do you need a test environment?

The test environment is important to allow end users and developers a place to try out features of the software or application without affecting the live real world environment. You can practice adding/deleting/editing data without any negative consequences.

This work was conducted as part of the development of Clinical Imaging Review System (CIRS).