Using Environment Variables In VitePress - issue#4516

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.