update environment variables page

Author: emily-shen

src/content/docs/workers/configuration/environment-variables.mdx

@@ -3,10 +3,9 @@ pcx_content_type: configuration
 title: Environment variables
 head: []
 description: Environment variables are a type of binding that allow you to attach text strings or JSON values to your Worker
-
 ---
 
-import { Render, TabItem, Tabs, WranglerConfig } from "~/components"
+import { Render, TabItem, Tabs, WranglerConfig } from "~/components";
 
 ## Background
 
@@ -26,31 +25,34 @@ Refer to the following example on how to access the `API_HOST` environment varia
 
 ```js
 export default {
-  async fetch(request, env, ctx) {
-    return new Response(`API host: ${env.API_HOST}`);
-  }
-}
+	async fetch(request, env, ctx) {
+		return new Response(`API host: ${env.API_HOST}`);
+	},
+};
 ```
 
 </TabItem> <TabItem label="TypeScript" icon="seti:typescript">
 
 ```ts
 export interface Env {
-  API_HOST: string;
+	API_HOST: string;
 }
 
 export default {
-  async fetch(request, env, ctx): Promise<Response> {
-    return new Response(`API host: ${env.API_HOST}`);
-  }
+	async fetch(request, env, ctx): Promise<Response> {
+		return new Response(`API host: ${env.API_HOST}`);
+	},
 } satisfies ExportedHandler<Env>;
 ```
 
 </TabItem> </Tabs>
 
+### Configuring different environments in Wrangler
+
+You can set up [environments in Wrangler](/workers/wrangler/environments), and specify different values for your environment variables in each environment.
 `vars` is a non-inheritable key. [Non-inheritable keys](/workers/wrangler/configuration/#non-inheritable-keys) are configurable at the top-level, but cannot be inherited by environments and must be specified for each environment.
 
-To define environment variables for different environments, refer to the example below:
+The example below sets up two environments, `staging` and `production`, with different values for `API_HOST` and `API_ACCOUNT_ID`.
 
 <WranglerConfig>
 
@@ -70,14 +72,9 @@ SERVICE_X_DATA = { URL = "service-x-api.prod.example", MY_ID = 456 }
 
 </WranglerConfig>
 
-For local development with `wrangler dev`, variables in the [Wrangler configuration file](/workers/wrangler/configuration/) are automatically overridden by any values defined in a `.dev.vars` file located in the root directory of your worker. This is useful for providing values you do not want to check in to source control.
-
-```shell
-API_HOST = "localhost:4000"
-API_ACCOUNT_ID = "local_example_user"
-```
+To run Wrangler commands in specific environments, you can pass in the `--env` or `-e` flag. For example, you can develop the Worker in the `dev` environment by running `npx wrangler dev -e=staging`, and deploy it with `npx wrangler deploy -e=production`.
 
-Alternatively, you can specify per-environment values in the [Wrangler configuration file](/workers/wrangler/configuration/) and provide an `environment` value via the `env` flag when developing locally like so `wrangler dev --env=local`.
+Learn about [environments in Wrangler](/workers/wrangler/environments).
 
 ## Add environment variables via the dashboard
 
@@ -94,14 +91,14 @@ To add environment variables via the dashboard:
 
 :::caution[Plaintext strings and secrets]
 
-
 Select the **Secret** type if your environment variable is a [secret](/workers/configuration/secrets/).
 
-
 :::
 
 <Render file="env_and_secrets" />
 
+<Render file="secrets-in-dev" />
+
 ## Related resources
 
-* Learn how to access environment variables in [ES modules syntax](/workers/reference/migrate-to-module-workers/) for an optimized experience.
+- Migrating environment variables from [Service Worker format to ES modules syntax](/workers/reference/migrate-to-module-workers/#environment-variables).