Environment variables UI

Environment variables are usually used to define credentials, e.g.: API keys for third-party API usage in your Wappler app

These environment variables may differ between Development and Production targets, e.g.: Sandbox API key for development, Production API key for production

I propose the creation of a UI where you can add environment variables to be expected by your app, as well as their associated values (for the current target). I’m imagining a rectangular dialog similar to the API Action dialog, where you’d have a grid control with the environment keys you want to define in left side, and the respective values on the right side.

Two files would be created:

.env

YOUTUBE_API_KEY=ieshoo8doo1ohr4eephail3X
DB_NAME=my_app
DB_PASSWORD=123

example.env:

YOUTUBE_API_KEY=
DB_NAME=
DB_PASSWORD=

The file .env (at the root folder relative to the project) would be .gitignore’d. I know the .env file would probably be stored inside .wappler for each different target, I also recommend Git ignoring those .env files. The file example.env would serve as a base for the .env - it’s meant to be shared on Git so developers can know which keys to fill, and Wappler GUI would read this file to pre-populate the dialog. Server-side, steps would be needed to ensure a .env file with keys with empty values would not override already-defined environment variables

I also propose the DB connection dialog to allow picking ENV keys from this example.env file. Take special attention to the Port field, as it only accepts numeric values - not strings (you’d need to change that to be able to accept a $_ENV)

Topic open for discussion. As a discussion suggestion, I suggest discussing (pun intended) where we could insert the button to actually open this environment variable editor dialog. Maybe in the left-handed sidebar of Wappler?

Community Page
Last updated: