V2 is in public beta! 🎉 Report any issues on the repository.

Powerful suite of Blade components for TALL Stack apps.

Env Bar

A fixed bar utility at the top of the page.

Many applications can have different environments, such as local, staging, sandbox, and production. In this scenario, it becomes a bit risky to have the same application open in different browser tabs, interacting with each of the environments. The TallStackUI EnvBar is a sticky helper at the top of the page that allows you to easily identify the environment you are interacting with through various visual information associated with different cores per environment. The EnvBar is different from the environment component, the environment component is very simple compared to the EnvBar. The EnvBar is an official TallStackUI package installed via composer.

As you can see in the example above, the environment is "local", so this determines the green color for all visual elements of the EnvBar. There are colors for: local, staging and sandbox, because we understand that EnvBar will not be used in production - although it is possible, through a visualization scheme by authenticated user. By default the defined color scheme is:

  • local - shades of green colors
  • stating - shades of yellow colors
  • sandbox - shades of orange colors
composer require tallstackui/envbar

The EnvBar, it will be automatically injected into your application.

php artisan vendor:publish --tag=envbar-config
There are several useful settings available through the config/envbar.php configuration file, however most of them can be set through environment variables. Here is the list of all available environment variables:
  • ENVBAR_ENABLED : Enable/disable the EnvBar.
  • ENVBAR_DISABLE_ON_TESTS : Enable/disable the EnvBar on tests.
  • ENVBAR_SIZE : Set the size of the EnvBar: Allowed: xs, sm, md, lg, xl
  • ENVBAR_FIXED : If the EnvBar should be fixed at the top.
  • ENVBAR_TAILWIND_BREAKING_POINTS : If the TailwindCSS breakpoints should be displayed.
  • ENVBAR_WARNING_MESSAGE : Allows you to set a warning message.
  • ENVBAR_CLOSABLE_ENABLED : If the close button should be displayed.
  • ENVBAR_CLOSABLE_TIMEOUT : If after closing the EnvBar, it should be displayed again after a certain time, in minutes.
  • ENVBAR_LINKS : Set a list of links to be displayed on the right side of the EnvBar as a dropdown.
  • ENVBAR_FOR_AUTHENTICATED_USERS_ENABLED : If the EnvBar should be displayed only for authenticated users.
  • ENVBAR_FOR_AUTHENTICATED_USERS_GUARD : The default guard to be used for authenticated users.
  • ENVBAR_ON_MOBILE : If the EnvBar should be displayed on mobile.
  • ENVBAR_PROVIDER : The provider to be used for fetching the last release. Allowed: github, bitbucket, envoyer.
  • ENVBAR_GITHUB_TOKEN : GitHub token to be used for fetching the last release.
  • ENVBAR_GITHUB_REPOSITORY : GitHub repository to be used for fetching the last release.
  • ENVBAR_GITHUB_DAYS_FOR_CACHE : The time in days to cache the last GitHub release.
  • ENVBAR_BITBUCKET_TOKEN : BitBucket token to be used for fetching the last release.
  • ENVBAR_BITBUCKET_REPOSITORY : BitBucket repository to be used for fetching the last release.
  • ENVBAR_BITBUCKET_DAYS_FOR_CACHE : The time in days to cache the last release.
  • ENVBAR_ENVOYER_TOKEN : Envoyer token to be used for fetching the last release.
  • ENVBAR_ENVOYER_PROJECT_ID : Envoyer project id to be used for fetching the last release.
  • ENVBAR_ENVOYER_DAYS_FOR_CACHE : The time in days to cache the last release.

By default, EnvBar does not work in the production environment. This is because it is important to read this documentation in its entirety before using it in production. Therefore, to activate EnvBar in production you must:

  • Enable the production environment in the configuration file.
  • Optionally, create a Laravel Gate to control which users will see the EnvBar.

As mentioned above, you can create a Laravel Gate to control which users will see the EnvBar in production. The process is similar to what is done for Horizon, however the gate name should be envbar::view :

use App\Models\User;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Gate;
 
class AppServiceProvider extends ServiceProvider
{
// ...
 
public function boot(): void
{
Gate::define('envbar::view', function (User $user) {
return in_array($user->email, [
]);
});
}
}

You can customize the color scheme for each environment in the configuration file. The default value will be similar to the following:

// ...
 
'environments' => [
'local' => 'green',
'staging' => 'yellow',
'sandbox' => 'orange',
// 'production' => 'red',
],
 
// ...

All colors are based on the TailwindCSS color scheme. We strongly suggest to use production as red if you will activate it.

You can control which pages the EnvBar will be ignored on via the configuration file:

// ...
 
'ignore_on' => [
'pulse/*',
'horizon/*',
'telescope/*',
],
 
// ...

Behind the scenes, this feature uses Request::is to check the current route.

To avoid multiple requests to the git provider, the latest release is cached for ENVBAR_*_CACHED_FOR day(s). If you want to clear the release cache, you can clear the entire application cache or run the following command to clear the release cache only, without affecting the other cache:

php artisan envbar:flush

If you are using ENVBAR_CLOSABLE_TIMEOUT and you closed the EnvBar, you can use the command below to show the EnvBar again without waiting for the final minutes timeout to run out:

php artisan envbar:show

EnvBar has its own dedicated repository. For this reason, issues, pull requests, and releases should be submitted to this repository instead of the official TallStackUI repository.

Code highlighting provided by Torchlight