Live Preview
Preview your environment variables in real-time using @envin/cli.
envin ships with a CLI tool that allows you to preview, validate, and edit your environment variables in real-time.
The CLI reads your envin configuration file, processes all your environment files (.env.local etc.), and starts a local server that you can use to preview your environment variables in real-time.
Launch preview
This will start a local server at http://localhost:3000. You can also specify a custom port using the --port flag.
Make sure to place your env.config.ts file in the root of your directory where you run the CLI. Otherwise, the CLI will not be able to find it.
Also, the .env files should be colocated in the same directory as your env.config.ts to be picked up correctly. This will be customizable in the future.
Usage
Development mode
In Development Mode, the environment variables used during development will be displayed. This is useful when you are developing your application and want to see the environment variables that are being used.
This mode will use variables from the following files:
.env.env.development.env.local
Production mode
In Production Mode, the environment variables used during production will be displayed. This is useful when you are deploying your application and want to see the environment variables that will be used.
This mode will use variables from the following files:
.env.env.production.env.local.env.production.local
Generating variables
The right-hand side of the preview displays the effective environment variables that will be used in production—the final values that will be used in your application based on where they are defined.
The Copy button copies the environment variables to your clipboard in a format ready to be pasted into your hosting provider's environment variables section. It merges variables from each environment file using the effective order of resolution.
We recommend creating a new file at .env.production.local and pasting the copied variables into it so they will override variables in other files. Then, copy the result using the Copy button again and paste it into your hosting provider's environment variables.
Debugging
You can use filters to show only certain variables or search for a specific variable using the search bar.
There are also different filter options for the variables:
all- Show all variables.invalid- Show only variables that are invalid (with validation issues).valid- Show only variables that are valid (without validation issues).
Use these filters to narrow down the variables you want to debug.
Most production environment variables should be set in your hosting provider for security reasons.
To temporarily debug your production environment variables, you can follow these steps:
- Copy the variables from your hosting provider
- Create a file at
.env.production.local. This file should be ignored by Git. - Paste the copied variables into the
.env.production.localfile. - Use
Productionas the mode in the preview. - Analyze the data in the preview.
Note: Delete the .env.production.local file when you're done or store it securely.
What's next?
We're going to significantly improve and extend envin CLI in the coming months!
Follow us on Twitter and join our Discord community 🤝