Differentiate Websites using Environment Indicator in Drupal 8

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

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.