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 colorsstating
- shades of yellow colorssandbox
- 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
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, xlENVBAR_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
The EnvBar has the ability to display links in a dropdown to serve as a collection of documents or development
materials. You have two ways to define these links, either through the ENVBAR_LINKS
environment variable or
through the configuration file. In addition, links can have a label associated with a link or just links,
where the label will be the link itself.
Only links:
ENVBAR_LINKS="https://google.com.br,https://github.com"
Label and link:
ENVBAR_LINKS="Google|https://google.com.br,GitHub|https://github.com"
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.