Improved env document

src/pages/secrets-management/dotenv-file.mdx

@@ -1,44 +1,68 @@
-import { FileTree } from 'nextra/components'
+import { FileTree } from "nextra/components";
 
 # Secrets Management
 
 ## DotEnv File
 
-This approach is inspired by how usually developers manage secrets in their source code.
+Environment variables are used to store sensitive data such as API keys, tokens, and configuration settings outside the source code. This helps keep your code secure and makes it easier to manage different settings for various environments (e.g., local, staging, production).
+In **Bruno**, environment variables can be managed through `.env` files.
 
-In this approach, you can store all your secrets in a `.env` file at the **root** of your collection folder.
+## DotEnv File for Secret Management
 
-The folder structure should be arranged as follows:
+In **Bruno**, you can store your secrets (e.g., API keys, JWT tokens) in a `.env` file located at the **root** of your collection folder. This approach is inspired by how developers typically manage secrets in their codebase.
+
+You **cannot** create the `.env` file directly inside Bruno. You need to manually create the `.env` file at the **root** of your Bruno collection folder to store your secrets. Once created, you can access those variables within your Bruno collection.
+
+### Folder Structure Example
+
+Below is an example folder structure for your collection:
 
 <FileTree.Folder name="bruno-collection" defaultOpen>
-  <FileTree.Folder name="api-folder" >
+  <FileTree.Folder name="api-folder">
     <FileTree.Folder name="customer-api" />
     <FileTree.Folder name="emp-api">
       <FileTree.File name="details.bru" />
     </FileTree.Folder>
-      <FileTree.File name="lib.js" />
-
+    <FileTree.File name="lib.js" />
   </FileTree.Folder>
+  <FileTree.File name=".env" />
   <FileTree.File name=".gitignore" />
   <FileTree.File name="bruno.json" />
   <FileTree.File name="package.json" />
-   <FileTree.File name=".env" />
 </FileTree.Folder>
 
+## Creating and Using the `.env` File
 
-Bruno will automatically load the secrets from this file and make them available to your collection via `process.env.<secret-name>`.
+1. Create a `.env` file manually in the root of your collection folder. This file will store your sensitive environment variables.
+
+2. Define your secrets in the `.env` file. For example:
+
+```bash filename=".env" showLineNumbers
+JWT_TOKEN=your_jwt_token_value
+API_KEY=your_api_key_value
+```
+
+These secrets will be accessible in your Bruno collection via the `process.env` object.
 
 ![dot env vars](/screenshots/dot-env-vars.webp)
 
+Bruno will automatically load the secrets from this file and make them available to your collection via `process.env.<secret-name>`.
+
 Your environment file at `environments/local.bru` would look like
+
 ```bash filename="local.bru"
 vars {
-  host: http://localhost:5005
-  jwtToken: {{process.env.JWT_TOKEN}}
+  baseURL: https://echo.usebruno.com
+  JWT_TOKEN: {{process.env.JWT_TOKEN}}
+  API_KEY: {{process.env.API_KEY}}
 }
+
 ```
 
-And now you can safely check in your collection to source control without worrying about exposing your secrets.
-Don't forget to add `.env` to your `.gitignore` file.
+In this example, the `JWT_TOKEN` secret from the `.env` file is referenced using `process.env.JWT_TOKEN`. This will be replaced with the actual value of `JWT_TOKEN` when the collection is executed.
+
+## Managing Secrets
+
+1. Always add the `.env` file to your `.gitignore` file to ensure secrets are not accidentally pushed to version control.
 
-You can store a `.env.sample` file in your collection folder to help other developers get started with the collection.
+2. If you need to share the structure of your environment variables with other developers, create a `.env.sample` file without actual secret values.