TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

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
  • staging - shades of yellow colors
  • sandbox - shades of orange colors
composer require tallstackui/envbar:^2.0

EnvBar will be automatically injected into your application. If you prefer to determine where it should be injected instead of accepting automatic injection, you can use @envbar anywhere in your layout.

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:

Variable Description
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_BOTTOM If the EnvBar should be fixed at the bottom instead of 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.
  • Set the ENVBAR_FOR_AUTHENTICATED_USERS_ENABLED environment variable as true .
  • Optionally, set ENVBAR_FOR_AUTHENTICATED_USERS_GUARD auth guard. Default is web .
  • Optionally, create a Laravel Gate to control which users will see the EnvBar.
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:

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

All colors are based on the TailwindCSS color scheme.

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::routeIs 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 should be submitted to this repository instead of the official TallStackUI repository. We don't have releases on there, only tags.

Code highlighting provided by Torchlight