This Article is also found in Web-Warrior-Toolbox
Anything you put in the frontend or expose through routes is visible to users and AI agents, while secrets like API keys and credentials must stay server‑side.
In this article I propose organizing your project with clear boundaries to make it obvious what’s safe to expose and what must be hidden, reducing the chance of leaking sensitive data.
I used this folder structure
⋊> ~/projects tree my-project -la 09:36:59
my-project
├── back-env
│ ├── .env
│ ├── .env.prod
│ └── .env.prod.pc
├── builder
│ └── build.sh
├── front-env
│ ├── .env
│ ├── .env.dev
│ ├── .env.dev.pc
│ ├── .env.prod
│ └── .env.stagging
|-------------------------------------------------------------
| AI Agents have access to repos and all its contents
|-------------------------------------------------------------
└── repos
├── my-project-back
│ ├── .env.example
│ └── src
└── my-project-front
├── .env.example
└── src
The main idea is to provide access to code repositories to AI agents but keep .env files on higher folders to keep them private.
Frontend needs to be build so that means that we need multiple .env files depending of where we deploy the dist folder. For this reason I considered organizing the .env files in folders.
Finally I considered a build.sh script that runs something like this to build the project with the selected .env file.
