Installing and configuring Environment Indicator

Last updated on
9 June 2025

This documentation needs review. See "Help improve this page" in the sidebar.

Introduction

Environment Indicator is a Drupal module designed to simplify managing multiple site environments by providing visual indicators directly within your site interface. It helps you quickly identify which environment (Development, Staging, Production, etc.) you are currently working on, reducing the risk of errors and confusion.

Requirements

There are no special requirements for installing and using Environment Indicator. It integrates seamlessly with Drupal core and the Toolbar module.

  • Toolbar Module: Environment Indicator adds visual cues to the toolbar.  Toolbar ships with Drupal core.

Installation

This module comes packaged with this following modules:

  • Environment Indicator (environment_indicator) The basic environment indicator with environment switcher functionality.
  • Environment Indicator UI (environment_indicator_ui) The User Interface for the active environment settings.
  • Environment Indicator - Toolbar Integration (environment_indicator_toolbar) The Toolbar module integration.

To install Environment Indicator:

  1. Follow the standard procedure for installing contributed Drupal modules. Refer to Installing modules for detailed instructions.

Configuration

Permissions: Ensure users have the necessary permissions:

  • See environment indicator: Allows users to view the environment indicator.

  • Administer environment_indicator settings: Allows users to configure global options.


Global Options: Configure settings from the admin interface at /admin/config/development/environment-indicator.

  • Adjust toolbar background color.

  • Enable favicon overlay.


Environment Switchers: Add links to switch between environments. Configure these at /admin/config/development/environment-indicator/switcher


Environment-Specific Configuration Overrides: 

Customize in settings.php

Note: The example below assumes your hosting provider exposes a $_ENV['ENVIRONMENT'] variable with one of the following values: landodevtest, or live. You may need to adjust it for your hosting platform.

/**
 * Environment Indicator module settings.
 *
 * Each hosting provider will have different environment variables available.
 */
if (isset($_ENV['ENVIRONMENT'])) {
  switch ($_ENV['ENVIRONMENT']) {
    case 'ddev':
      // DDev environments.
      $config['environment_indicator.indicator']['name'] = 'DDev';
      $config['environment_indicator.indicator']['bg_color'] = '#990055';
      break;
    case 'dev':
      $config['environment_indicator.indicator']['name'] = 'Dev';
      $config['environment_indicator.indicator']['bg_color'] = '#4a634e';
      break;
    case 'test':
      $config['environment_indicator.indicator']['name'] = 'Test';
      $config['environment_indicator.indicator']['bg_color'] = '#a95c42';
      break;
    case 'live':
      $config['environment_indicator.indicator']['name'] = 'LIVE';
      break;
    default:
      // Multidev catchall.
      $config['environment_indicator.indicator']['name'] = 'Multidev: ' . $_ENV['ENVIRONMENT'];
      $config['environment_indicator.indicator']['bg_color'] = '#1e5288';
      break;
  }
}
else {
  $config['environment_indicator.indicator']['name'] = 'Local';
  $config['environment_indicator.indicator']['bg_color'] = '#707070';
}

Using with Config Split module:

If you already use the Config Split module to define environment-specific config.

Note: Our users have reported that: 

You might need to import config twice (e.g., drush config:import), once so that Drupal reads the new config-split settings, and the second to actually import that environment's split.  This can be done via drush like so drush cr; drush cim -y; drush cim -y


Local Configuration Overrides: 

Customize settings for local development in settings.local.php:

$config['environment_indicator.indicator']['bg_color'] = '#FF5555';
$config['environment_indicator.indicator']['fg_color'] = '#555533';
$config['environment_indicator.indicator']['name'] = 'Staging';

Color Suggestions

Environment/Tier Name Description Example colors (Background/Text)
Local Developer's desktop/workstation Local (#006600/#ffffff)
Virtual Machine VM hosted on developers desktop or possibly development server Virtual Machine (#006600/#ffffff)
Development Development server aka sandbox Development (#4caf50/#000000)
Integration CI build target, or for developer testing of side effects Integration (#4caf50/#000000)
Test/QA For functional, performance testing, Quality Assurance etc. Test/QA (#4caf50/#000000)
UAT User acceptance testing UAT (#fff176/#000000)
Stage/Pre-production Mirror of production environment Stage/Pre-production (#fff176/#000000)
Production/Live Serves end-users/clients Production/Live (#ef5350/#000000)

Troubleshooting

  • If configurations in settings.local.php aren't appearing, uncomment appropriate lines in settings.php.
  • Grant users the necessary permissions if configurations aren't visible.
  • Check for syntax errors in settings.local.php using php -l settings.local.php.

FAQ

Q: What happened to the feature which allowed me to save environment configurations that would be selected by looking at the request URL?
A: This feature has been removed as of the 8.x-3.x branch.

Q: What happened to the feature which allowed me to position the environment indicator at the bottom of the screen?
A: This feature has been removed as of the 8.x-3.x branch.

Q: What happened to the feature which allowed me to display the environment indicator in a fixed position in the browser window, regardless of where I scrolled?
A: This feature has been removed as of the 8.x-3.x branch.

Help improve this page

Page status: Needs review

You can: