From 502c3d18107d6c0dca930b3a913740495c81ca2d Mon Sep 17 00:00:00 2001
From: Kareim Tarek <49312818+KareimGazer@users.noreply.github.com>
Date: Fri, 24 Jan 2025 21:47:07 +0200
Subject: [PATCH] docs(environment-variables.md): Create docs for using env
 vars

---
 docs/en/reference/environment-variables.md | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 docs/en/reference/environment-variables.md

diff --git a/docs/en/reference/environment-variables.md b/docs/en/reference/environment-variables.md
new file mode 100644
index 000000000000..a98576364a3b
--- /dev/null
+++ b/docs/en/reference/environment-variables.md
@@ -0,0 +1,69 @@
+---
+outline: deep
+---
+
+# Environment Variables
+
+## Basic Workflow
+
+Using environment variables in VitePress is essential for managing sensitive data such as API keys and service URLs.
+VitePress allows you to load environment variables from `.env` files using the `loadEnv` function to load these variables into your configuration (e.g. `.vitepress/config.ts`).
+
+### Step 1: Create the .env File
+
+The first step in setting up environment variables is to create a `.env` file in the root directory of your VitePress project.
+This file will store your sensitive information and configuration settings.
+
+### Step 2: Defining Environment Variables
+
+Open the `.env` file and define your environment variables.
+Remember that in Vite, all environment variables that need to be exposed to your application must be prefixed with `VITE_.` Here’s an example of what your `.env` file might look like
+
+```bash
+VITE_ALGOLIA_APP_ID=your_algolia_app_id
+VITE_ALGOLIA_API_KEY=your_algolia_api_key
+VITE_ALGOLIA_INDEX_NAME=your_algolia_index_name
+```
+
+### Step 3: Load Environment Variables in VitePress Configuration
+
+Next, you need to load these environment variables into your VitePress configuration. This is done using the `loadEnv` function from VitePress.
+
+```js
+import { loadEnv } from 'vitepress';
+
+// Load environment variables
+const env = loadEnv('', process.cwd());
+```
+
+### Step 4: Accessing Environment Variables in Your Application
+
+for example, configuring your blog to use Algolia
+
+```js
+import { loadEnv } from 'vitepress';
+import { defineConfig } from 'vitepress';
+
+// Load environment variables
+const env = loadEnv('', process.cwd());
+
+export default defineConfig({
+  themeConfig: {
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: env.VITE_ALGOLIA_APP_ID,
+        apiKey: env.VITE_ALGOLIA_API_KEY,
+        indexName: env.VITE_ALGOLIA_INDEX_NAME,
+      },
+    },
+  },
+});
+
+```
+
+## Important Considerations
+
+- **Prefix Requirement**: Ensure all relevant environment variables are prefixed with `VITE_`. Only these will be accessible in your application.
+- **File Loading Order**: Vite loads `.env` files based on specific priorities. For example, `.env.production` will override settings from `.env`.
+- **Restarting Your Server**: After making changes to your `.env` file, restart your VitePress server for changes to take effect.