As a web developer, you probably build your sites first in a local environment (aka localhost), then you commit all your changes to a staging server (i.e. an online server to which only you or the development team has access) and if everything works fine in the staging server, you’ll commit these changes to a production or live server (that’s your online site).
However, you don’t have a way to differentiate between your local, your staging and your production environments apart from the address box of your browser, so it’s very easy to mix up everything and that could lead to complications. The worst case scenario is making changes directly to your live site without testing and breaking it. In order to prevent this, you can use the Environment Indicator module.
The Environment Indicator module adds a visual hint to your site, that way you’ll always be aware of the environment you’re working on. We’re going to cover installation and usage of this module in this tutorial.
Let’s start!
Getting Started
There are several ways to install the module. You can use composer for example:
Before we begin, go download Environment Indicator and install the “Environment Indicator UI” sub-module.
Using Composer:
composer require drupal/environment_indicator
Or, Drush:
drush dl environment_indicator -y
Once dowloaded, go to Extra and install both: “Environment Indicator” and “Environment Indicator UI”
Configuring Environment Indicator
To configure the module, go to Configuration, “Environment Indicator Settings” and you’ll see 3 tabs:
- Settings
- Environment Switcher
- Current Environment (this tab is provided by the Environment Indicator UI module)
In the Settings tab you have two options:
- Toolbar: integrates the environment indicator module with the toolbar. The toolbar will have a different color according to the environment you’re in.
- Favicon: the module will add a favicon to your browser tab with the color of the corresponding environment and the first letter of it. If the name of your environment is Development, you’ll see a D with the colors you set up for that particular environment. This is practical if you have several tabs from different environments opened in your browser
Leave both options checked.
In the Environment Switcher tab you can add buttons to switch between all your environments.
Click the “Add environment” button and give it a proper name, for example “Staging Server”. In the Hostname field insert the address of your staging server, configure the colors according to your preferences.
You could for example use the colors from a traffic light to indicate the different environments as defined in table 1-0.
Table 1-0. Example list of environments and their colors
Environment |
Foreground (text) color |
Background color |
Development | White | Green |
Staging | Black | Yellow |
Production | White | Red |
Click the Save button and repeat the procedure for each of your servers.
You should see all the different environments and their colors on the “Environment Switcher” page.
Finally click the “Current Environment” tab. This is the place where you configure the colors of the toolbar for the environment you’re working in at this very moment. I’m working on my localhost, so I will call this environment Development.
The foreground (text) color will be white and the background color will be a shade of green (lighter than the color of the switcher), you can choose the same color or another. I’ve chosen a different color just for demonstration purposes.
Click “Save Configuration”.
Notice that you’ll have to repeat this process in each one of your environments.
Click Configuration, Performance and clear the site cache.
Test Environment Indicator
You’ll see immediately that the toolbar changes its color to the color you selected in the “Current Environment” tab and also a new menu link in the Toolbar called Development.
Click this menu link. There are the environment switcher buttons, each one of them will take you to the URL you entered in the “Environment Switcher” tab. Notice also the favicon in the browser tab with a white “D” (Development) over a green background.
Configure Environment Indicator via settings.php
As already mentioned, the “Current Environment” tab is provided by the Environment Indicator UI module. You can also “hardcode” these settings directly in the settings.php
file of your installation without the need of enabling the module.
Use a text editor to open the settings.php
file of your Drupal installation and type this code at the end of the file:
$config['environment_indicator.indicator']['bg_color'] = '#333333'; $config['environment_indicator.indicator']['fg_color'] = '#DDDDDD'; $config['environment_indicator.indicator']['name'] = 'Dev. Environment';
You’ll see the change in the toolbar after rebuilding the site cache.
This won’t work if you already have configured the Current Environment in the UI. The first configuration has always precedence.
Summary
The Environment Indicator module is a valuable tool when developing your Drupal site. It helps you keep everything in order in your development process and prevents from inadvertently making changes in your live environment without proper testing.
Pretty cool for switching environments but does it set and server variable that can be used for deployment scripts?
Hi Jakub,
No it does not do anything like that. It just changes the colour of the toolbar.
Cheers,
Ivan
Thanks Ivan,
Still useful 😉 Thanks for reply and all the best. Your tutorials are great!
Thanks for the tutorial Jorge. I’m wondering how can the colors be set for all the different remote environments? Can those all be set in the settings.php file? Or will you need to go on the actual remote environment and set them using the Configuration UI? If so, that will suck, as the config would get overwritten each time the code is re-deployed to those remote environments, right?
If anyone has input that can shed light on this, please do.
Thanks,
Chris
Hi Chris,
The “Configure Environment Indicator via settings.php” section in the tutorial explains exactly how to do that. Unless I’m not understanding your comment.
Cheers,
Ivan
Hi Ivan,
Yes, I saw the explanation of how to add the setting for one environment. I was looking for the way to add settings for multiple environments, I wasn’t sure how to do that. This worked for me:
switch ($_SERVER[HTTP_HOST]) {
case ‘drupalvm.test’:
$config[‘environment_indicator.indicator’][‘bg_color’] = ‘#006109’;
$config[‘environment_indicator.indicator’][‘fg_color’] = ‘#ffffff’;
$config[‘environment_indicator.indicator’][‘name’] = ‘Local’;
break;
case ‘yourlivesite.com’:
$config[‘environment_indicator.indicator’][‘bg_color’] = ‘#53292A’;
$config[‘environment_indicator.indicator’][‘fg_color’] = ‘#FFC156’;
$config[‘environment_indicator.indicator’][‘name’] = ‘Production’;
break;
}
Sorry if my question wasn’t very clear. And thanks again for the tutorial!
Chris
Hi Chris,
Sorry, now I understand.
Yes the way you’ve done it is one way of doing it. 🙂
Cheers,
Ivan